1、为什么要抽离公共代码

在多入口文件的情况下，如果在每个入口文件中都引入了相同的模块，那么打包时，就会将这个模块重复打包进去，这是没有必要的。

2、为什么要抽离第三方代码

每次更改了自己的代码，重新打包，生成了新的hash文件名，而第三方包（如lodash）并没有改变，不需要重新打包。

3、配置optimization下的splitChunks项

开发环境下没有必要抽离
webpack.common.js和webpack.dev.js没有改动
webpack.prod.js改动

optimization和plugins平级

1、chunks共有三个选项值

一般情况下用all
chunk理解为是一段代码（代码块）

1. initial 入口 chunk，对于异步导入的文件不处理
2. async 异步 chunk，只对异步导入的文件处理
3. all 全部 chunk，同步、异步都处理

    optimization: {

        // 分割代码块
        splitChunks: {
            chunks: 'all',
            
            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    minSize: 0,  // 大小限制，最小多大，就抽离出来，为了防止一些比较小的模块被单独抽离出来，反而浪费资源
                    minChunks: 1  // 最少复用过几次，就抽离出来
                },

                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }

4、配置HtmlWebpackPlugin插件

chunks项，是一个数组，表示这个入口下要引用哪些chunk，chunk的名字就是上面抽离时定义的name

  plugins: [
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
            chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other', 'common']  // 考虑代码分割
        })
    ]

标签：代码,抽离,webpack,html,模块,chunks,chunk
来源： https://blog.csdn.net/longtengg1/article/details/118768556