webpack4 runtimeChunk 配置导致生成的chunk文件的意义以及html加载问题

Question

我的应用是多入口的应用。htmlwebpackplugin 的配置是这样的

// 这里是多入口 index.html文件的路径列表
indexTemplateList.forEach(item => {
    const filename = item.substring(item.lastIndexOf('/') + 1);
    const fileTag = filename.substring(0, filename.lastIndexOf('.'));

    htmlWebpackPluginList.push(new htmlWebpackPlugin({
        title: 'passenger-wallet',
        template: path.resolve(projectRootDir, item),
        filename: `../${filename}`,
        inject: 'body',
        // 配置注入页面的chunk 多入口是根据entry配置的多入口来命名的
        chunks: ['runtime', 'vendor', fileTag],
        minify: {
            // removeComments: true,
            // collapseWhitespace: true,
            // minifyJS: true,
            // minifyCSS: true
        }
    }));
});

我的优化配置是这样的

optimization: {
        minimize: true,
        minimizer: [
            // new OptimizeCSSAssetsPlugin(),
            // new TerserPlugin({terserOptions: {output: {comments: false} } })
        ],
        // 将多入口的webpack运行时文件打包成一个 runtime文件
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    chunks: 'initial',
                    test: 'vendor',
                    name: 'vendor', // 使用 vendor 入口作为公共部分
                    enforce: true
                }
            }
        }
    }

打包的结果是下面这样子的

除了生成了页面自己的js runtime.js vendor.js 还有一个名字非常长的js文件。不知道这个js文件是为什么生成的，而且它也没有自动的插入到html 模板文件中。

build完成后的html模板文件

Answer 1

之前遇过这个问题，不过我的是因为多页应用，有些页面没有某个公共库，所以打包时就会把其中几个页面公用的库打包到一个文件中，文件名用页面名加～连接。就跟你这个一样。我当时是cacheGroups里未设置name，设置里name之后，就只有一个文件了，你可以以这种思路看下

Answer 2

多提取一个 libs。禁掉默认的两个规则。

splitChunks: {
    chunks: 'all',
    automaticNameDelimiter: '.',
    name: undefined,
    cacheGroups: {
      default: false,
      vendors: false,
      libs: {
        name: 'libs',
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      },
      vendor: {
        test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|lodash|core-js|@babel\/runtime|axios|webpack)[\\/]/,
        chunks: 'all',
        priority: 10,
        name: 'vendor'
      }
    }
  }

另外，HTMLPlugin 里面多添加一个chunk

 chunks: ['runtime', 'vendor', 'libs', fileTag],