HtmlWebpackPlugin插入chunk成功，但js和css却没生效？

Question

通过HtmlWebpackPlugin生成，并插入'index'这个js文件

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/pages/index/index.html',
      // 很奇怪，加了vendor后，js和css才会生效
      chunks: ['runtime', 'vendor', 'index'],
      minify: htmlMinify,
    }),

'vendor'的来源：

optimization: {
    namedModules: true,
    namedChunks: true,
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
          vendor: { 
              test: /node_modules/,
              chunks: 'initial',
              name: 'vendor', 
              priority: 10
          }
      }
    },
  },

问题：HtmlWebpackPlugin生成的html文件，其中通过chunk插入的css和js在浏览器的devtool上看是有引用到的，路径也没错，但就是没生效，只有将node_moduldes抽成vendor.js并插入到HtmlWebpackPlugin里才能使里面引用到js和css生效

Answer 1

一般来说，vendor 是其它所有依赖，你不加载它，运行当然不正常。

另外，我觉得你对 “生效” 的理解有问题，JS、CSS 正常工作都有很多先决条件，生效不生效，应该指加载成功和 mimetype 正确。