webpack高手秘籍（六）

前言

前面我们写了几篇文章用来介绍webpack源码，跟着官网结合demo把整个webpack配置撸了一遍：

• webpack源码解析一
• webpack源码解析二（html-webpack-plugin插件）
• webpack源码解析三
• webpack源码解析四
• webpack源码解析五
• webpack源码解析六（webpack-chain）

今天我们结合demo来看一下webpack的Optimization配置。

demo还是前面几节中的: https://github.com/913453448/webpack-demo.git

optimization

webpack4.0版本后会根据当前配置的mode对优化操作，你也可以单独配置或者是覆盖默认的配置。

什么意思呢？比如在webpack4之前如果我们需要对打包好的资源进行压缩，可能我们需要单独用到uglifyjs-webpack-plugin插件，如果我们需要按规则拆分包可能需要用到CommonsChunkPlugin等等，由于这些操作在项目中很频繁也很实用，所以webpack干脆就内置到源码变成一个“Optimization”配置选项。

minimize

boolean

是否利用默认的TerserPlugin插件或者自定义的插件去压缩打包过后的资源文件。

生产环境默认是true

可以看一下webpack源码，

webpack/lib/WebpackOptionsDefaulter.js:

...
const isProductionLikeMode = options => {
    return options.mode === "production" || !options.mode;
};
...
this.set("optimization.minimize", "make", options =>
            isProductionLikeMode(options)
        );
...

可以看到，mode为“production”的时候默认是开启的，我们可以这样设置：

webpack.config.js

module.exports = {
  //...
  optimization: {
    minimize: options.mode === "production"
  }
};

minimizer

[TerserPlugin] and or [function (compiler)]

压缩代码使用的插件，默认是TerserPlugin ，你也可以使用该选项覆盖默认的插件。

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        }
      }),
    ],
  }
};

或者使用方法：

module.exports = {
  optimization: {
    minimizer: [
      (compiler) => {
        const TerserPlugin = require('terser-webpack-plugin');
        new TerserPlugin({ /* your config */ }).apply(compiler);
      }
    ],
  }
};

源码位置：

lib/WebpackOptionsDefaulter.js(默认插件)

...
this.set("optimization.minimizer", "make", options => [
            {
                apply: compiler => {
                    // Lazy load the Terser plugin
                    const TerserPlugin = require("terser-webpack-plugin");
                    new TerserPlugin().apply(compiler);
                }
            }
        ]);
...

lib/WebpackOptionsApply.js：

...
        if (options.optimization.minimize) {
            for (const minimizer of options.optimization.minimizer) {
                if (typeof minimizer === "function") {
                    minimizer.call(compiler, compiler);
                } else {
                    minimizer.apply(compiler);
                }
            }
        }
...

ok！我们结合demo用一下这个选项，首先，我们把minimize选项设置成false,

webpack-chain.js:

const Config = require('webpack-chain');
const config = new Config();
const path = require("path");

config
    .mode("production")
    .context(path.resolve(__dirname, "./src"))
    .entry("app")
        .add("./index.js")
        .end()
    .output
        .path(path.join(process.cwd(), "lib"))
        .pathinfo(false)
        .filename("[name].[contenthash:16].[fullhash:16].[id].js")
        .chunkFilename("[id].js")
        .end()
    .set("experiments",{})
    .module
        // .noParse(/babel-polyfill/)
        .rule("vue")
            .test(/\.vue$/)
            .use("vue-loader")
                .loader("vue-loader")
                .end()
            .end()
        .rule("sass")
            .test( /\.(sass|scss)$/)
            .use("style-loader")
                .loader("style-loader")
                .end()
            .use("css-loader")
                .loader("css-loader")
                .end()
            .use("postcss-loader")
                .loader("postcss-loader")
                .options( {
                    config: {
                        path: path.resolve(__dirname, "./postcss.config.js")
                    }
                })
                .end()
            .use("sass-loader")
                .loader("sass-loader")
                .end()
            .end()
        .rule("png")
            .test(/\.png$/)
            .oneOf("png-loader")
                .rule("url-loader")
                    .resourceQuery(/inline/)
                    .use("url-loader")
                        .loader("url-loader")
                        .options({
                            limit: 1024 * 1024 * 10
                        })
                        .end()
                    .end()
                .rule("file-loader")
                    .resourceQuery(/external/)
                    .use("file-loader")
                        .loader("file-loader")
                        .end()
                    .end()
                .end()
            .end()
        .end()
    .resolve
        .alias
            .set("DemoVue", path.resolve(__dirname, "./src/demo-vue.vue"))
            .end()
        .extensions
            .add(".wasm").add(".mjs").add(".js").add(".json").add(".vue")
            .end()
        .modules
            .add(path.resolve(__dirname, "src")).add("node_modules")
            .end()
        .unsafeCache(/demo-publicpath/)
        .end()
    .plugin("vue-loader-plugin")
        .use(require("vue-loader-plugin"),[])
        .end()
    .devServer
        .before((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        })
        .after((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        })
        .clientLogLevel("info")
        .allowedHosts
            .add("localhost")
            .end()
        .contentBase(path.join(process.cwd(), "lib"))
        .filename(/app\.js/)
        .headers({
            'X-Custom-Foo': 'bar'
        })
        .historyApiFallback(true)
        .host("0.0.0.0")
        .port("8090")
        .hot(true)
        .set("liveReload", true)
        .open(true)
        .useLocalIp(true)
        .overlay(true)
        .end()
    .performance
        .hints("warning")
        .end();

config
    .optimization
        .minimize(false);
module.exports = config.toConfig();

然后我们执行webpack：

➜  webpack-demo git:(master) ✗ npx webpack
Hash: bf5359b2e366b637ed00
Version: webpack 5.0.0-beta.7
Time: 1539ms
Built at: 2020-07-21 15:28:52
                                       Asset      Size
                                      425.js  17.2 KiB  [emitted]
        63fe41824cb8236c0896a71b7df7f461.png  59.3 KiB  [emitted]
app.0ebefcd962170615.bf5359b2e366b637.143.js   210 KiB  [emitted] [immutable]  [name: app]
Entrypoint app = app.0ebefcd962170615.bf5359b2e366b637.143.js
./index.js + 2 modules 222 KiB [built]
./demo-vue.vue + 5 modules 5.05 KiB [built]
./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 824 bytes [built]
../node_modules/style-loader/dist/cjs.js!../node_modules/css-loader/dist/cjs.js!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ruleSet[0].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js!../node_modules/vue-loader/lib??vue-loader-options!./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 810 bytes [built]
../pub1.png?external 80 bytes [built]
../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.64 KiB [built]
../node_modules/css-loader/dist/cjs.js!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ruleSet[0].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js!../node_modules/vue-loader/lib??vue-loader-options!./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 550 bytes [built]
../node_modules/css-loader/dist/runtime/api.js 2.46 KiB [built]
    + 8 hidden modules
➜  webpack-demo git:(master) ✗ 

可以看到，在我们lib目录下面生成了三个文件：

63fe41824cb8236c0896a71b7df7f461.png
425.js
app.0ebefcd962170615.bf5359b2e366b637.143.js

我们随便看一个js文件：

lib/app.0ebefcd962170615.bf5359b2e366b637.143.js

/******/ (() => { // webpackBootstrap
/******/    "use strict";
/******/    var __webpack_modules__ = ({});
/************************************************************************/
/******/    // The module cache
/******/    var __webpack_module_cache__ = {};
/******/    
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/        // Check if module is in cache
/******/        if(__webpack_module_cache__[moduleId]) {
/******/            return __webpack_module_cache__[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = __webpack_module_cache__[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
...

ok! 可以看到，代码并没有被压缩，中间还有些注释，这样的代码我们肯定是不能发布的，所以我们用一下webpack默认的压缩，我们直接把minimize选择设置成true(默认设置)：

webpack-chain.js

...
config
    .optimization
        .minimize(true);
module.exports = config.toConfig();

然后我们执行webpack编译看结果：

./lib
├── 425.js
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.454b4ea21a1d7574.a4f7bd5606571443.143.js
└── app.454b4ea21a1d7574.a4f7bd5606571443.143.js.LICENSE

可以看到，lib下面出现了四个文件，

app.454b4ea21a1d7574.a4f7bd5606571443.143.js：

/*! For license information please see app.454b4ea21a1d7574.a4f7bd5606571443.143.js.LICENSE */
(()=>{"use strict";var t={},e={};function n(r){if(e[r])return e[r].exp...

可以看到，注释webpack默认都帮我们移到了一个叫“app.454b4ea21a1d7574.a4f7bd5606571443.143.js.LICENSE”文件中，

app.454b4ea21a1d7574.a4f7bd5606571443.143.js.LICENSE：

/*!
 * Vue.js v2.6.11
 * (c) 2014-2019 Evan You
 * Released under the MIT License.
 */

ok! 这就是vue的源码中的注释，webpack直接帮我们拎出来了，那如果我们不需要这些注释我们该怎么做呢？

我们需要重新修改TerserPlugin 配置信息，

webpack-chain.js:

...
config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false
            }])
module.exports = config.toConfig();

👌， 我们运行webpack：

./lib
├── 425.js
├── 63fe41824cb8236c0896a71b7df7f461.png
└── app.732205f4c110a904.a8ba809e02a92a83.143.js

0 directories, 3 files

可以看到，生产了三个文件，另外一个LICENSE文件不见了，我们打开“app.732205f4c110a904.a8ba809e02a92a83.143.js”看看，

app.732205f4c110a904.a8ba809e02a92a83.143.js：

(()=>{"use strict";var t,e={},n={};function r(t){if(n[t])return n[t].exports;var o=n[t...
/*!
 * Vue.js v2.6.11
 * (c) 2014-2019 Evan You
 * Released under the MIT License.
 */
 var o=Object.freeze({});function i(t){return null==t}function a(t){return null!=t}function s(t){return!0===t}function c(t){return"string"==typeof t||"numbe ...                                                                                   

可以看到，虽然注释文件没了，但是文件内部的注释并没有去掉，我们修改一下配置文件，

webpack-chain.js:

...
config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
module.exports = config.toConfig();

我们运行webpack看结果：

(()=>{"use strict";var t,e={},n={};function r(t){if(n[t])return...

运行的过程我就不演示了，可以看到，编译过后的js文件代码都在一行，并且进行了压缩，去掉了注释。

Terser-webpack-plugin更多的用法大家可以参考官网：https://webpack.js.org/plugins/terser-webpack-plugin/

splitChunks

By default webpack v4+ provides new common chunks strategies out of the box for dynamically imported modules. See available options for configuring this behavior in the SplitChunksPlugin page.

在webpack4之前我们如果需要自定义拆分包规则的话用的是commons-chunk-plugin插件，webpack4以后内置了SplitChunksPlugin 插件用于包规则处理。

在介绍SplitChunksPlugin之前我们先安装一下webpack的一个包处理插件webpack-bundle-analyzer:

yarn add -D webpack-bundle-analyzer

然后我们修改一下配置文件webpack-chain.js：

const Config = require('webpack-chain');
const config = new Config();
const path = require("path");

config
    .mode("development")
    .context(path.resolve(__dirname, "./src"))
    .entry("app")
        .add("./index.js")
        .end()
    .output
        .path(path.join(process.cwd(), "lib"))
        .pathinfo(false)
        .filename("[name].[contenthash:16].[fullhash:16].[id].js")
        .chunkFilename("[id].js")
        .end()
    .set("experiments",{})
    .module
        // .noParse(/babel-polyfill/)
        .rule("vue")
            .test(/\.vue$/)
            .use("vue-loader")
                .loader("vue-loader")
                .end()
            .end()
        .rule("sass")
            .test( /\.(sass|scss)$/)
            .use("style-loader")
                .loader("style-loader")
                .end()
            .use("css-loader")
                .loader("css-loader")
                .end()
            .use("postcss-loader")
                .loader("postcss-loader")
                .options( {
                    config: {
                        path: path.resolve(__dirname, "./postcss.config.js")
                    }
                })
                .end()
            .use("sass-loader")
                .loader("sass-loader")
                .end()
            .end()
        .rule("png")
            .test(/\.png$/)
            .oneOf("png-loader")
                .rule("url-loader")
                    .resourceQuery(/inline/)
                    .use("url-loader")
                        .loader("url-loader")
                        .options({
                            limit: 1024 * 1024 * 10
                        })
                        .end()
                    .end()
                .rule("file-loader")
                    .resourceQuery(/external/)
                    .use("file-loader")
                        .loader("file-loader")
                        .end()
                    .end()
                .end()
            .end()
        .end()
    .resolve
        .alias
            .set("DemoVue", path.resolve(__dirname, "./src/demo-vue.vue"))
            .end()
        .extensions
            .add(".wasm").add(".mjs").add(".js").add(".json").add(".vue")
            .end()
        .modules
            .add(path.resolve(__dirname, "src")).add("node_modules")
            .end()
        .unsafeCache(/demo-publicpath/)
        .end()
    .plugin("vue-loader-plugin")
        .use(require("vue-loader-plugin"),[])
        .end()
    .devServer
        .before((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        })
        .after((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        })
        .clientLogLevel("info")
        .allowedHosts
            .add("localhost")
            .end()
        .contentBase(path.join(process.cwd(), "lib"))
        .filename(/app\.js/)
        .headers({
            'X-Custom-Foo': 'bar'
        })
        .historyApiFallback(true)
        .host("0.0.0.0")
        .port("8090")
        .hot(true)
        .set("liveReload", true)
        .open(true)
        .useLocalIp(true)
        .overlay(true)
        .end()
    .performance
        .hints("warning")
        .end();

config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }]);
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

可看到，打包完毕后会帮我们自动打开一个包分析页面，会把所有的chunk列出来，然后依赖关系也展示出来：

在这里插入图片描述

OK，在分析splitChunks配置之前我们先弄清楚几个概念：

• module：引入的模块，也就是你用require跟import引入的代码。
• chunk：webpack根据入口文件结合配置信息对module的一个拆分，也就是说chunk是module的集合。
• bundle：bundle是webpack对chunk进行编译压缩打包等处理过后的产物。

了解玩这些概念后，我们看一下webpack对splitChunks默认配置：

lib/WebpackOptionsDefaulter.js

...
this.set("optimization.splitChunks", {});
        this.set("optimization.splitChunks.hidePathInfo", "make", options => {
            return isProductionLikeMode(options);
        });
        this.set("optimization.splitChunks.chunks", "async");
        this.set("optimization.splitChunks.minChunks", 1);
        this.set("optimization.splitChunks.minSize", "make", options => {
            return isProductionLikeMode(options) ? 30000 : 10000;
        });
        this.set("optimization.splitChunks.minRemainingSize", "make", options => {
            return options.mode === "development" ? 0 : undefined;
        });
        this.set("optimization.splitChunks.maxAsyncRequests", "make", options => {
            return isProductionLikeMode(options) ? 6 : Infinity;
        });
        this.set("optimization.splitChunks.automaticNameDelimiter", "-");
        this.set("optimization.splitChunks.maxInitialRequests", "make", options => {
            return isProductionLikeMode(options) ? 4 : Infinity;
        });
        this.set("optimization.splitChunks.cacheGroups", {});
        this.set("optimization.splitChunks.cacheGroups.default", {
            idHint: "",
            reuseExistingChunk: true,
            minChunks: 2,
            priority: -20
        });
        this.set("optimization.splitChunks.cacheGroups.defaultVendors", {
            idHint: "vendors",
            reuseExistingChunk: true,
            test: NODE_MODULES_REGEXP,
            priority: -10
        });
...

我们先感受一下默认splitChunks对我们当前项目的chunk处理，配置文件，

webpack-chain.js：

const Config = require('webpack-chain');
const config = new Config();
const path = require("path");

config
    .mode("development")
    .context(path.resolve(__dirname, "./src"))
    .entry("app")
        .add("./index.js")
        .end()
    .output
        .path(path.join(process.cwd(), "lib"))
        .pathinfo(false)
        .filename("[name].[contenthash:16].[fullhash:16].[id].js")
        .chunkFilename("[id].js")
        .end()
    .set("experiments",{})
    .module
        // .noParse(/babel-polyfill/)
        .rule("vue")
            .test(/\.vue$/)
            .use("vue-loader")
                .loader("vue-loader")
                .end()
            .end()
        .rule("sass")
            .test( /\.(sass|scss)$/)
            .use("style-loader")
                .loader("style-loader")
                .end()
            .use("css-loader")
                .loader("css-loader")
                .end()
            .use("postcss-loader")
                .loader("postcss-loader")
                .options( {
                    config: {
                        path: path.resolve(__dirname, "./postcss.config.js")
                    }
                })
                .end()
            .use("sass-loader")
                .loader("sass-loader")
                .end()
            .end()
        .rule("png")
            .test(/\.png$/)
            .oneOf("png-loader")
                .rule("url-loader")
                    .resourceQuery(/inline/)
                    .use("url-loader")
                        .loader("url-loader")
                        .options({
                            limit: 1024 * 1024 * 10
                        })
                        .end()
                    .end()
                .rule("file-loader")
                    .resourceQuery(/external/)
                    .use("file-loader")
                        .loader("file-loader")
                        .end()
                    .end()
                .end()
            .end()
        .end()
    .resolve
        .alias
            .set("DemoVue", path.resolve(__dirname, "./src/demo-vue.vue"))
            .end()
        .extensions
            .add(".wasm").add(".mjs").add(".js").add(".json").add(".vue")
            .end()
        .modules
            .add(path.resolve(__dirname, "src")).add("node_modules")
            .end()
        .unsafeCache(/demo-publicpath/)
        .end()
    .plugin("vue-loader-plugin")
        .use(require("vue-loader-plugin"),[])
        .end()
    .devServer
        .before((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        })
        .after((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        })
        .clientLogLevel("info")
        .allowedHosts
            .add("localhost")
            .end()
        .contentBase(path.join(process.cwd(), "lib"))
        .filename(/app\.js/)
        .headers({
            'X-Custom-Foo': 'bar'
        })
        .historyApiFallback(true)
        .host("0.0.0.0")
        .port("8090")
        .hot(true)
        .set("liveReload", true)
        .open(true)
        .useLocalIp(true)
        .overlay(true)
        .end()
    .performance
        .hints("warning")
        .end();

config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
            .end()
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

然后执行webpack编译：

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.0da7d4017a7c8ff8.f56afc3595db81f3.app.js
├── demo-vue_vue.js
└── vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js

可以看到，多了一个“vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js”文件，那么这个文件是干什么的呢？

在这里插入图片描述

ok, 我们通过包分析器发现这个文件中包含的都是“demo-vue_vue.js”文件中的一些node_modules下面的一些依赖，而我们的“demo-vue_vue.js”文件又是入口文件“app.0da7d4017a7c8ff8.f56afc3595db81f3.app.js”中的一个异步模块，我们打开“app.0da7d4017a7c8ff8.f56afc3595db81f3.app.js”文件稍微瞄一眼：

app.0da7d4017a7c8ff8.f56afc3595db81f3.app.js

...
 "demo-view":()=>Promise.all(/* import() */[__webpack_require__.e("vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d"), __webpack_require__.e("demo-vue_vue")]).then(__webpack_require__.bind(null, "./demo-vue.vue"))\n    },\n    render:(h)=>h("demo-view")\n});\n\n//# sourceURL=webpack:///./index.js?')}},
...

可以看到，我们的异步组件被当成了异步模块加载到了app.js入口文件中，也就是说如果需要加载“demo-view”组件的话，需要加载“vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js”跟“./demo-vue.vue”文件。

那么webpack是怎么把我们的“demo-vue.vue”异步组件又拆分出来了一个“vendors-xxx”文件的呢？

先提前透露一下哈，是以下webpack默认配置起的作用：

...
const NODE_MODULES_REGEXP = /[\\/]node_modules[\\/]/i;
...
    //只对异步模块做拆分处理，也就是我们的异步组件（demo-vue.vue）
    this.set("optimization.splitChunks.chunks", "async");
    //当前异步组件（demo-vue.vue）中依赖的module的最小数量为1
        this.set("optimization.splitChunks.minChunks", 1);
//分离出来的chunk需要满足的最小尺寸（因为我们demo中的mode为“development”，所以为9.765625kb）
        this.set("optimization.splitChunks.minSize", "make", options => {
            return isProductionLikeMode(options) ? 30000 : 10000;
        });
//需要从异步组件（demo-vue.vue）中的哪些模块，默认是“NODE_MODULES_REGEXP”，也就是node_modules底下的模块
this.set("optimization.splitChunks.cacheGroups.defaultVendors", {
            idHint: "vendors",
            reuseExistingChunk: true,
            test: NODE_MODULES_REGEXP,
            priority: -10
        });
...

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.0da7d4017a7c8ff8.f56afc3595db81f3.app.js
├── demo-vue_vue.js
└── vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js

• 63fe41824cb8236c0896a71b7df7f461.png：src/demo-vue.vue中引入的图片

    pubImg: require("../pub1.png?external").default
  

• app.0da7d4017a7c8ff8.f56afc3595db81f3.app.js：入口文件生成

• demo-vue_vue.js：入口文件中的异步模块

  ...
  const app=new Vue({
      el: "#app",
      components:{
        "demo-view":()=>import("./demo-vue")
      },
      render:(h)=>h("demo-view")
  });
  ...
  

• vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js：webpack利用了默认的splitChunks配置从demo-vue_vue.js文件中分离出来的。

好啦！ 可能有些小伙伴要晕了，没关系，我们先提前感受一下，我们下面分析一下splitChunks每个属性的含义。

chunks

function (chunk) string

指定需要从哪些模块中进行拆包处理，

• async：表示只从异步加载得模块（动态加载import()）里面进行拆分
• initial：表示只从入口模块进行拆分
• all：表示以上两者都包括

async

webpack默认是“async”配置，前面我们也用到了，会把异步组件中node_module下的依赖都打到vendors中，我们用一下“initial”试试：

initial

webpack-chain.js

...
config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
            .end()
        .splitChunks({
            chunks: "initial"
        })
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

然后执行webpack看结果：

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.7d5989fc2077821e.6b708c2c1d07233a.app.js
├── demo-vue_vue.js
└── vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.6b708c2c1d07233a.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

0 directories, 4 files

先看一下我们的入口文件，src/index.js:

__webpack_public_path__ = "/";
import Vue from "vue";
import "demo-publicpath";
const root=document.createElement("div");
root.id="app";
document.body.appendChild(root)
const app=new Vue({
    el: "#app",
    components:{
      "demo-view":()=>import("./demo-vue")
    },
    render:(h)=>h("demo-view")
});

按照我们的配置文件跟splitChunks的默认配置，webpack会帮我们把入口文件中node_modules下：

import Vue from "vue";

vue模块单独打包到vendors文件中，也就是最后生成的“vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.6b708c2c1d07233a.vendors-node_modules_vue_dist_vue_runtime_esm_js.js”文件。

all

我们继续修改配置文件，把chunks改成“all”，

webpack-chain.js：

...
config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
            .end()
        .splitChunks({
            chunks: "all"
        })
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

然后webpack编译打包：

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.58e33a3bd925d2c6.13725b5e05d55c03.app.js
├── demo-vue_vue.js
├── vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js
└── vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.13725b5e05d55c03.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

0 directories, 5 files

可以看到，最后生成了5个文件，

• vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js：异步组件demo-vue.vue中node_modules下的依赖。
• vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.13725b5e05d55c03.vendors-node_modules_vue_dist_vue_runtime_esm_js.js：入口文件index.js中node_modules下的依赖。

function

你可以指定function并且按照自己规则选择哪些chunk需要进行拆包处理，比如我们这里只让入口app进行拆包处理，

webpack-chain.js：

...
config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
            .end()
        .splitChunks({
            chunks: (chunk)=>{
                return chunk.name === "app";
            }
        })
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

然后打包处理就只会提取入口文件中的chunk：

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.8cdd90e710751419.a59d0fe7901eaea9.app.js
├── demo-view.js
└── vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.a59d0fe7901eaea9.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

0 directories, 4 files

如果我们只需要处理异步组件中的chunk，首先我们给我们的异步组件给定一个name，不然没法做判断，

src/index.js:

...
const app=new Vue({
    el: "#app",
    components:{
      "demo-view":()=>import(/* webpackChunkName: "demo-vue" */ "./demo-vue")
    },
    render:(h)=>h("demo-view")
});

我们给了异步组件chunkname为“demo-view”，然后我们判断当chunk的name为“app”跟“demo-vue”的时候进行拆包处理，

webpack-chain.js:

config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
            .end()
        .splitChunks({
            chunks: (chunk)=>{
                return chunk.name === "app" || chunk.name==="demo-vue";
            }
        })
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

然后执行打包：

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.f2a53484c6605e60.ddc69c26cfb6b94c.app.js
├── demo-vue.js
├── vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js
└── vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.ddc69c26cfb6b94c.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

0 directories, 5 files

ok, 可以看到，同时对我们的入口“app”跟异步组件“demo-vue”进行了拆包处理。

cacheGroups

splitChunks会根据cacheGroups去进行拆包处理，splitChunks默认有两个缓存组：vender和default，可以再来回顾一下splitChunks的默认配置：

this.set("optimization.splitChunks.cacheGroups.default", {
            idHint: "",
            reuseExistingChunk: true,
            minChunks: 2,
            priority: -20
        });
        this.set("optimization.splitChunks.cacheGroups.defaultVendors", {
            idHint: "vendors",
            reuseExistingChunk: true,
            test: NODE_MODULES_REGEXP,
            priority: -10
        });

ok，我们的vendors是一直在起作用，但是default貌似没啥作用？

那是因为default中配置了“minChunks: 2”，也就是出现重复两次的公共模块才会被拆分。

ok，我们copy一份"src/index.js"叫"src/index2.js",然后在webpack中添加一个入口app2, 把chunks改成“all”

webpack-chain.js:

const Config = require('webpack-chain');
const config = new Config();
const path = require("path");

config
    .mode("development")
    .context(path.resolve(__dirname, "./src"))
    .entry("app")
        .add("./index.js")
        .end()
    .entry("app2")
        .add("./index2.js")
        .end()
    .output
        .path(path.join(process.cwd(), "lib"))
        .pathinfo(false)
        .filename("[name].[contenthash:16].[fullhash:16].[id].js")
        .chunkFilename("[id].js")
        .end()
    .set("experiments",{})
    .module
        .noParse(/polyfill/)
        .rule("vue")
            .test(/\.vue$/)
            .use("vue-loader")
                .loader("vue-loader")
                .end()
            .end()
        .rule("sass")
            .test( /\.(sass|scss)$/)
            .use("style-loader")
                .loader("style-loader")
                .end()
            .use("css-loader")
                .loader("css-loader")
                .end()
            .use("postcss-loader")
                .loader("postcss-loader")
                .options( {
                    config: {
                        path: path.resolve(__dirname, "./postcss.config.js")
                    }
                })
                .end()
            .use("sass-loader")
                .loader("sass-loader")
                .end()
            .end()
        .rule("png")
            .test(/\.png$/)
            .oneOf("png-loader")
                .rule("url-loader")
                    .resourceQuery(/inline/)
                    .use("url-loader")
                        .loader("url-loader")
                        .options({
                            limit: 1024 * 1024 * 10
                        })
                        .end()
                    .end()
                .rule("file-loader")
                    .resourceQuery(/external/)
                    .use("file-loader")
                        .loader("file-loader")
                        .end()
                    .end()
                .end()
            .end()
        .end()
    .resolve
        .alias
            .set("DemoVue", path.resolve(__dirname, "./src/demo-vue.vue"))
            .end()
        .extensions
            .add(".wasm").add(".mjs").add(".js").add(".json").add(".vue")
            .end()
        .modules
            .add(path.resolve(__dirname, "src")).add("node_modules")
            .end()
        .unsafeCache(/demo-publicpath/)
        .end()
    .plugin("vue-loader-plugin")
        .use(require("vue-loader-plugin"),[])
        .end()
    .devServer
        .before((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        })
        .after((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        })
        .clientLogLevel("info")
        .allowedHosts
            .add("localhost")
            .end()
        .contentBase(path.join(process.cwd(), "lib"))
        .filename(/app\.js/)
        .headers({
            'X-Custom-Foo': 'bar'
        })
        .historyApiFallback(true)
        .host("0.0.0.0")
        .port("8090")
        .hot(true)
        .set("liveReload", true)
        .open(true)
        .useLocalIp(true)
        .overlay(true)
        .end()
    .performance
        .hints("warning")
        .end();

config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
            .end()
        .splitChunks({
            chunks: "all",
        })
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

我们先看一下我们的入口文件index.js:

__webpack_public_path__ = "/";
import Vue from "vue";
import "demo-publicpath";
const root=document.createElement("div");
root.id="app";
document.body.appendChild(root)
const app=new Vue({
    el: "#app",
    components:{
      "demo-view":()=>import(/* webpackChunkName: "demo-vue" */ "./demo-vue")
    },
    render:(h)=>h("demo-view")
});

index2.js文件内容跟index.js一样，可以发现两个入口文件都依赖了“demo-publicpath”模块：

import "demo-publicpath";

所以默认的cacheGroups中的default应该是会起作用的，我们来试试，

我们直接webpack打包：

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.f2a53484c6605e60.5634fdc906df69a3.app.js
├── app2.720bd2c9436db62f.5634fdc906df69a3.app2.js
├── demo-vue.js
├── vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js
└── vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.5634fdc906df69a3.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

0 directories, 6 files

可以看到，只多了一个app2入口，但是app1跟app2中共用的“demo-publicpath.js”并没有被单独拆出来，这是为什么呢？

因为在webpack的默认配置中，splitChunks的最小size是10kb，我们的“demo-publicpath.js”模块大小不够。

好啦！ 知道原因后，那我们就往“demo-publicpath.js”中多添加点内容，我们直接去copy一份polyfill的源码到src/assets目录，然后在“demo-publicpath.js”中导入polyfill，

src/demo-publicpath.js:

import "./assets/polyfill";
export const say = () => {
    document.body.append(document.createTextNode("hello webpack"))
}

然后再执行webpack打包：

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.7eb0f7d54d50246d.380c5a33877e21dc.app.js
├── app2.2746d1497b7d22f2.380c5a33877e21dc.app2.js
├── demo-publicpath_js.ca83113eaf484d9f.380c5a33877e21dc.demo-publicpath_js.js
├── demo-vue.js
├── vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js
└── vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.380c5a33877e21dc.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

0 directories, 7 files

👌，可以看到，app跟app2中共有的“demo-publicpath.js”模块被单独打包成了“demo-publicpath_js.ca83113eaf484d9f.380c5a33877e21dc.demo-publicpath_js.js”文件。

好啦～ 说了这里有小伙伴要提出疑问了，为什么我们需要单独copy一份polyfill源码到src/assets呢？我们直接去导入node_modules下面的难道不行吗？

我们试试看！ 我们修改一下polyfill的导入形式，改成从node_modules导入：

src/demo-publicpath.js

import "babel-polyfill/dist/polyfill";
export const say = () => {
    document.body.append(document.createTextNode("hello webpack"))
}

然后我们webpack编译打包：

./lib
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.62234a61ae4b51ea.d1e25902f2ab5db9.app.js
├── app2.50e3c79cb0103ebc.d1e25902f2ab5db9.app2.js
├── demo-vue.js
├── vendors-node_modules_babel-polyfill_dist_polyfill_js-node_modules_vue_dist_vue_runtime_esm_js.c2493861c2404ba0.d1e25902f2ab5db9.vendors-node_modules_babel-polyfill_dist_polyfill_js-node_modules_vue_dist_vue_runtime_esm_js.js
└── vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js

0 directories, 6 files

可以看到，default又不起作用了，那我们的polyfill到底去哪了呢？ 没错！ 到vendors里面去了，也就是生成的“vendors-node_modules_babel-polyfill_dist_polyfill_js-node_modules_vue_dist_vue_runtime_esm_js.c2493861c2404ba0.d1e25902f2ab5db9.vendors-node_modules_babel-polyfill_dist_polyfill_js-node_modules_vue_dist_vue_runtime_esm_js.js”文件，为什么呢？

因为在默认的配置中vendors的优先级是高于default的，优先级的配置是通过priority属性：

this.set("optimization.splitChunks.cacheGroups.default", {
            idHint: "",
            reuseExistingChunk: true,
            minChunks: 2,
            priority: -20
        });
        this.set("optimization.splitChunks.cacheGroups.defaultVendors", {
            idHint: "vendors",
            reuseExistingChunk: true,
            test: NODE_MODULES_REGEXP,
            priority: -10
        });

所以为了让default起作用，我们才会把polyfill复制了一份放到了src/assets让“demo-publicpath.js”导入。

有没有发现webpack默认拆分出来的chunk名字又长又丑呢？我们可以通过name属性去修改默认的name：

webpack-chain.js

.splitChunks({
            chunks: "all",
            cacheGroups: {
                default: {
                    idHint: "",
                    reuseExistingChunk: true,
                    minChunks: 2,
                    priority: -20,
                    name: (module, chunks, cacheGroupKey)=>{
                        return "chunk-common";
                    }
                }
            }

效果就不演示了，小伙伴自己去运行。

ok，如果不想用默认cacheGroups的“default”跟“vendors”配置的话，我们只需要将它们置成false就可以了，

 .splitChunks({
            ...
            cacheGroups: {
                default: false,
                defaultVendors: false
            }
        })

maxInitialRequests

表示允许入口并行加载的最大请求数,之所以有这个配置也是为了对拆分数量进行限制，不至于拆分出太多模块导致请求数量过多而得不偿失。

这里需要注意几点：

• 入口文件本身算一个请求
• 如果入口里面有动态加载得模块这个不算在内
• 通过runtimeChunk拆分出的runtime不算在内
• 只算js文件的请求，css不算在内
• 如果同时又两个模块满足cacheGroup的规则要进行拆分，但是maxInitialRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来

看一下webpack默认配置：

...
this.set("optimization.splitChunks.maxInitialRequests", "make", options => {
  //生产环境是4个，测试环境不限制
            return isProductionLikeMode(options) ? 4 : Infinity;
        });
...

demo当前配置：

const Config = require('webpack-chain');
const config = new Config();
const path = require("path");

config
    .mode("development")
    .context(path.resolve(__dirname, "./src"))
    .entry("app")
        .add("./index.js")
        .end()
    .entry("app2")
        .add("./index2.js")
        .end()
    .output
        .path(path.join(process.cwd(), "lib"))
        .pathinfo(false)
        .filename("[name].[contenthash:16].[fullhash:16].[id].js")
        .chunkFilename("[id].js")
        .end()
    .set("experiments",{})
    .module
        .noParse(/polyfill/)
        .rule("vue")
            .test(/\.vue$/)
            .use("vue-loader")
                .loader("vue-loader")
                .end()
            .end()
        .rule("sass")
            .test( /\.(sass|scss)$/)
            .use("style-loader")
                .loader("style-loader")
                .end()
            .use("css-loader")
                .loader("css-loader")
                .end()
            .use("postcss-loader")
                .loader("postcss-loader")
                .options( {
                    config: {
                        path: path.resolve(__dirname, "./postcss.config.js")
                    }
                })
                .end()
            .use("sass-loader")
                .loader("sass-loader")
                .end()
            .end()
        .rule("png")
            .test(/\.png$/)
            .oneOf("png-loader")
                .rule("url-loader")
                    .resourceQuery(/inline/)
                    .use("url-loader")
                        .loader("url-loader")
                        .options({
                            limit: 1024 * 1024 * 10
                        })
                        .end()
                    .end()
                .rule("file-loader")
                    .resourceQuery(/external/)
                    .use("file-loader")
                        .loader("file-loader")
                        .end()
                    .end()
                .end()
            .end()
        .end()
    .resolve
        .alias
            .set("DemoVue", path.resolve(__dirname, "./src/demo-vue.vue"))
            .end()
        .extensions
            .add(".wasm").add(".mjs").add(".js").add(".json").add(".vue")
            .end()
        .modules
            .add(path.resolve(__dirname, "src")).add("node_modules")
            .end()
        .unsafeCache(/demo-publicpath/)
        .end()
    .plugin("vue-loader-plugin")
        .use(require("vue-loader-plugin"),[])
        .end()
    .devServer
        .before((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        })
        .after((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        })
        .clientLogLevel("info")
        .allowedHosts
            .add("localhost")
            .end()
        .contentBase(path.join(process.cwd(), "lib"))
        .filename(/app\.js/)
        .headers({
            'X-Custom-Foo': 'bar'
        })
        .historyApiFallback(true)
        .host("0.0.0.0")
        .port("8090")
        .hot(true)
        .set("liveReload", true)
        .open(true)
        .useLocalIp(true)
        .overlay(true)
        .end()
    .performance
        .hints("warning")
        .end();

config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
            .end()
        .splitChunks({
            chunks: "all",
            cacheGroups: {
                default: {
                    idHint: "",
                    reuseExistingChunk: true,
                    minChunks: 2,
                    priority: -20,
                    name: (module, chunks, cacheGroupKey)=>{
                        return "commons";
                    }
                }
            }
        })
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

然后webpack打包后会生成：

63fe41824cb8236c0896a71b7df7f461.png
app.0287e18f3a59d8de.032bbe1fbfafc5e2.app.js
app2.58808f5a4e707707.032bbe1fbfafc5e2.app2.js
commons.cfe1450bd9c9d2ff.032bbe1fbfafc5e2.commons.js
demo-vue.js
vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js
vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.032bbe1fbfafc5e2.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

入口app的requests有：

• app.0287e18f3a59d8de.032bbe1fbfafc5e2.app.js
• commons.cfe1450bd9c9d2ff.032bbe1fbfafc5e2.commons.js
• vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.032bbe1fbfafc5e2.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

app2跟app一样，maxInitialRequests默认是4，所以可以正常分离出“commons.cfe1450bd9c9d2ff.032bbe1fbfafc5e2.commons.js”，如果我们将maxInitialRequests设置“2”试试，

webpack-chain.js:

 .splitChunks({
            chunks: "all",
            maxInitialRequests: 2,
            cacheGroups: {
                default: {
                    idHint: "",
                    reuseExistingChunk: true,
                    minChunks: 2,
                    priority: -20,
                    name: (module, chunks, cacheGroupKey)=>{
                        return "commons";
                    }
                }
            }
        })

webpack编译看结果：

63fe41824cb8236c0896a71b7df7f461.png
app.0644d4709680673b.2d87a8324473e235.app.js
app2.0c27f9cb5e923e85.2d87a8324473e235.app2.js
demo-vue.js
vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js
vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.2d87a8324473e235.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

可以看到，“commons”并没有被分离出来。

maxAsyncRequests

maxAsyncRequests跟maxInitialRequests差不多，maxAsyncRequests主要是用来限制异步模块内部的并行最大请求数的。

在我们demo中指的就是“demo-vue.vue”异步组件，目前demo-vue.vue的requests有：

1. demo-vue.js
2. vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js

有小伙伴要疑问了“难道异步组件不需要依赖vue吗？”，也就是“vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.2d87a8324473e235.vendors-node_modules_vue_dist_vue_runtime_esm_js.js”文件，因为在入口文件中也有依赖vue，所以webpack认为vue是必须存在的，因此不算在里面。

ok, 如果我们把maxAsyncRequests改成“1”看一下还会分离“vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js”文件吗？

63fe41824cb8236c0896a71b7df7f461.png
app.425e43abcaba52da.cd98b0378c0ec2df.app.js
app2.ca0b00010af3e31c.cd98b0378c0ec2df.app2.js
demo-vue.js
vendors-node_modules_vue_dist_vue_runtime_esm_js.1c5043955daac720.cd98b0378c0ec2df.vendors-node_modules_vue_dist_vue_runtime_esm_js.js

可以看到，最后“vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_style-loader_dist_runtime_in-e18f0d.js”文件没有生成，此时demo-vue.vue（异步组件）的requests有：

1. demo-vue.js

实战

ok！说了那么多概念性的东西，我们结合demo来点平时项目中会用到的配置，比如我们demo这里，目前有两个入口“app”跟“app1”，分包规则如下：

1. node_modules底下的依赖跟polyfill都放入一个叫“chunk-vendors”的包中
2. 引用次数超过两次的放入到“chunk-common”包中。

ok, 了解完需求后我们直接修改一下配置文件：

webpack-chain.js：

const Config = require('webpack-chain');
const config = new Config();
const path = require("path");

config
    .mode("development")
    .context(path.resolve(__dirname, "./src"))
    .entry("app")
        .add("./index.js")
        .end()
    .entry("app2")
        .add("./index2.js")
        .end()
    .output
        .path(path.join(process.cwd(), "lib"))
        .pathinfo(false)
        .filename("[name].[contenthash:16].[fullhash:16].[id].js")
        .chunkFilename("[id].js")
        .end()
    .set("experiments",{})
    .module
        .noParse(/polyfill/)
        .rule("vue")
            .test(/\.vue$/)
            .use("vue-loader")
                .loader("vue-loader")
                .end()
            .end()
        .rule("sass")
            .test( /\.(sass|scss)$/)
            .use("style-loader")
                .loader("style-loader")
                .end()
            .use("css-loader")
                .loader("css-loader")
                .end()
            .use("postcss-loader")
                .loader("postcss-loader")
                .options( {
                    config: {
                        path: path.resolve(__dirname, "./postcss.config.js")
                    }
                })
                .end()
            .use("sass-loader")
                .loader("sass-loader")
                .end()
            .end()
        .rule("png")
            .test(/\.png$/)
            .oneOf("png-loader")
                .rule("url-loader")
                    .resourceQuery(/inline/)
                    .use("url-loader")
                        .loader("url-loader")
                        .options({
                            limit: 1024 * 1024 * 10
                        })
                        .end()
                    .end()
                .rule("file-loader")
                    .resourceQuery(/external/)
                    .use("file-loader")
                        .loader("file-loader")
                        .end()
                    .end()
                .end()
            .end()
        .end()
    .resolve
        .alias
            .set("DemoVue", path.resolve(__dirname, "./src/demo-vue.vue"))
            .end()
        .extensions
            .add(".wasm").add(".mjs").add(".js").add(".json").add(".vue")
            .end()
        .modules
            .add(path.resolve(__dirname, "src")).add("node_modules")
            .end()
        .unsafeCache(/demo-publicpath/)
        .end()
    .plugin("vue-loader-plugin")
        .use(require("vue-loader-plugin"),[])
        .end()
    .devServer
        .before((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        })
        .after((app, server, compiler)=>{
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        })
        .clientLogLevel("info")
        .allowedHosts
            .add("localhost")
            .end()
        .contentBase(path.join(process.cwd(), "lib"))
        .filename(/app\.js/)
        .headers({
            'X-Custom-Foo': 'bar'
        })
        .historyApiFallback(true)
        .host("0.0.0.0")
        .port("8090")
        .hot(true)
        .set("liveReload", true)
        .open(true)
        .useLocalIp(true)
        .overlay(true)
        .end()
    .performance
        .hints("warning")
        .end();

config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
                extractComments: false,
                terserOptions:{
                    output: {
                        comments: false
                    }
                }
            }])
            .end()
        .splitChunks({
            cacheGroups: {
                vendors: {
                    name: `chunk-vendors`,
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    chunks: 'all'
                },
                common: {
                    name: `chunk-common`,
                    minChunks: 2,
                    priority: -20,
                    chunks: 'all',
                    reuseExistingChunk: true
                }
            }
        })
config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin,[]);
module.exports = config.toConfig();

然后我们webpack打包编译：

63fe41824cb8236c0896a71b7df7f461.png
app.55ad00d0136c7d7d.306645240be8f953.app.js
app2.efd24a48f5ab103e.306645240be8f953.app2.js
chunk-common.3baec624a3539123.306645240be8f953.chunk-common.js
chunk-vendors.js
demo-vue.js

• chunk-vendors.js: 包含了node_modules底下的模块（vue、style-loader等等。）
• chunk-common.3baec624a3539123.306645240be8f953.chunk-common.js： 包含了assets/polyfill.js

ok, 我们直接用bundle-analyzer工具查看一下：

chunk-vendors.js

在这里插入图片描述

chunk-common.3baec624a3539123.306645240be8f953.chunk-common.js:

在这里插入图片描述

总结

我们花了很多章节来介绍webpack，不得不说webpack内容是真的多，对webpack作者佩服的五体投地，开源不易啊！！

好啦！我们的webpack差不多就告一段落了，后面可能会对vue、react脚手架对webpack的配置做分析，敬请期待！！