webpack4快速入门

安装

1. webpack4

2. webpack-cli 命令行单独出来,比如启动webpack

3. webpack-dev-server^3.1.0(依赖node6.11.5)

4. vue-loader^14.1.0

5. extract-text-webpack-plugin@next 还未发正式

6. 其他的loader,如果在编译过程中报can not find xxx的错误,说明xxx对应的loader可能需要升级了

7. 看一下有没有peerDependencies的提醒,有的话升级以下插件

零配置

"mode": {
  "description": "Enable production optimizations or development hints.",
  "enum": [
    "development",
    "production",
    "none"
  ]
}

一旦开启了 --mode production，会自动开启代码压缩、scope hoist(作用域提升) 等插件，以及自动传递环境变量给 lib 包，所以已经不需要 plugins 这个配置项了。
同理，开启了 --mode development 会自动开启 sourceMap 等开发插件，我们只要关心更简单的配置，这就是 4.0 零配置的重要改变。
当然，基本的entry output module 还是需要配置的

• mode 的默认值是 production

• entry 的默认值是 ./src

• output.path 的默认值是 ./dist

• UglifyJs 插件默认开启 caches和 parallizes(使用多进程并行运行和文件缓存来提高构建速度)

• 更详细的可以参考webpack 4 终于知道「约定优于配置」了

如果需要给配置文件传一些参数，通过 --env 传递

webpack-dev-server --mode development --env.param xxx 

webpack.config.js 接收

const param = yargs.argv.env.param

CommonsChunkPlugin

webpack 4 移除了 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk

通过设置 optimization.splitChunks.chunks: "all" 来启动默认的代码分割配置项

当满足如下条件时，webpack 会自动打包 chunks:

当前模块是公共模块（多处引用）或者模块来自 node_modules
当前模块大小大于 30kb
如果此模块是按需加载，并行请求的最大数量小于等于 5
如果此模块在初始页面加载，并行请求的最大数量小于等于 3