webpack4体验

webpack-dev-server的3.1.0版本只支持webpack4,所以以前的版本都不能使用3.1.0版本。

而webpack4把webpack-cli分离开来，所以要单独安装。

而webpack4较之前的版本运行更快。

在官网给出的示例中，可以不用配置entry和output，默认的entry:’/src’, 
默认的output:’./dist’，但是零配置的情况下’./src’的入口文件的文件名必须是index.js，否则会报错。

 

约定了生产模式和开发模式下的配置

在之前的版本中，针对生产环境和开发环境，需要做不同的配置， 
常见的都是指定标量，然后在webpack.config.js配置文件中，进行环境判别，

"scripts":{

   "prod":"NODE_ENV=production webpack -p"

}

判别出环境后，再在配置文件中，根据不同的环境做不同的打包工作。 
或者是生成两个配置文件，webpack.dev.js和webpack.prod.js，分别对应于两个环境。

在Webpack4.0中，通过mode指定环境。

在Webpack中，提供了mode变量，用于配置运行环境，mode的值可以为development，表示的是开发模式，或者是production，表示的是生产模式。

"scripts":{
  "build":"webpack --mode production"
}

在Webpack中约定了针对开发环境和生成环境的一些默认操作。所以一般没必要不需要在分两份配置文件。

 

使用package.json的scripts启动时直接到node_modules目录下寻找启动的，所以局部安装可以直接配置到scripts里。

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development"
  }

 

目前webpack4还是不稳定版本，所以还是有问题的，现在我的webpack-dev-server热加载无效，不知道为什么。还有webpack-dev-server最新版本已经默认配置的，所以不需要配置热加载等参数。