webpack 4.0.0-beta.0版本新特性介绍

这就是我们下节要说的内容模式设置。

★★ 注意：入口默认为 ./src 如果缺少此文件夹会报错！

> webpack --mode production
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\workspace\github\Webpack-Example'

3.2 模式设置

以往的项目使用 webpack3 脚手架生成项目初始模板都会有两个甚至三个配置文件，比如
webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js 而现在可以做到一个配置文件都不需要，直接在启动命令中传入参数 --mode development | production 达到区分不同模式的效果。

接下来修改 package.json 设置不同的模式：

 "scripts": {
 "dev": "webpack --mode development",
 "build": "webpack --mode production"
 },

重新执行 npm run dev 或 npm run build 即可看到不同的打包结果：

我们可以看到两种模式的结果完全不同，下面我们会更深入的按照我们真实的需求来讲解一些常用配置。

接下来这个配置是最常用到的，我们使用 webpack 的主要目的之一就是为了更好的支撑前段模块化的能力，既然需要模块化当然少不了代码分割，目前代码分割有以下几种：

1.  通过 entry 分割不同入口，常用于多页应用；
2.  通过 CommonsChunkPlugin 插件来分割不同功能模块；
3.  通过动态 import 来分割。

下面我们主要讲解 webpack 4.0.0-beta.0 版本的重大变化删除了 CommonsChunkPlugin 插件。

3.3 删除 CommonsChunkPlugin

webpack 4.0.0-beta.0删除了 CommonsChunkPlugin，以支持两个新的选项（optimization.splitChunks 和 optimization.runtimeChunk）。

从webpack 4.0.0-beta.0 开始分割 Chunk 将不在使用 CommonsChunkPlugin 插件，而是使用 optimization 配置项，具体的实现原理可以参考 CommonsChunkPlugin。

由于还没有正式官方文档出来，以下是我们通过实践出的 optimization 配置方法：
其中用到了新增的 splitChunks 属性，此属性看字面意思就明白是分割代码块的选项，其下可配置项已在下面示例代码中列出（有兴趣的朋友可以自行实践）：

entry: {
 vendor: ['lodash']
},
 
...
 
optimization: {
 splitChunks: {
 chunks: "initial", // 必须三选一： "initial" | "all"(默认就是all) | "async" 
 minSize: 0, // 最小尺寸，默认0
 minChunks: 1, // 最小 chunk ，默认1
 maxAsyncRequests: 1, // 最大异步请求数， 默认1
 maxInitialRequests : 1, // 最大初始化请求书，默认1
 name: function(){}, // 名称，此选项可接收 function
 cacheGroups:{ // 这里开始设置缓存的 chunks
 priority: 0, // 缓存组优先级
 vendor: { // key 为entry中定义的 入口名称
 chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是异步) 
 test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
 name: "vendor", // 要缓存的 分隔出来的 chunk 名称 
 minSize: 0,
 minChunks: 1,
 enforce: true,
 maxAsyncRequests: 1, // 最大异步请求数， 默认1
 maxInitialRequests : 1, // 最大初始化请求书，默认1
 reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
 }
 }
 }
 },