Webpack构建Vue项目时能否修改vendors.js和runtime.js文件名？

完全可以实现需求，通过调整Webpack的优化配置即可修改这两个chunk的文件名，以下是具体配置方案：

针对Vue CLI 3/4创建的项目（Vue 2.x常用模板） #

在项目根目录的vue.config.js中添加或修改如下配置：

module.exports = {
  configureWebpack: {
    optimization: {
      // 配置runtime chunk的文件名
      runtimeChunk: {
        name: 'runtime.pc'
      },
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            // 指定vendors chunk的文件名
            name: 'vendors.pc',
            chunks: 'all'
          }
        }
      }
    },
    // 可选：如果需要所有非入口chunk都统一加.pc后缀，可配置output.chunkFilename
    output: {
      chunkFilename: 'js/[name].pc.js'
    }
  }
}

配置说明 #

• runtimeChunk.name：直接指定runtime chunk的名称为runtime.pc，构建后会生成runtime.pc.js
• splitChunks.cacheGroups.vendors.name：将第三方依赖打包后的chunk命名为vendors.pc，对应生成vendors.pc.js
• output.chunkFilename：可选配置，若项目中还有其他异步chunk，可通过这个规则统一为它们添加.pc后缀，不需要的话可以移除该项

针对原生Webpack 4.x项目 #

如果是手动配置Webpack的项目，在webpack.config.js的optimization字段中做如下修改：

module.exports = {
  // ...其他配置
  output: {
    filename: 'js/[name].pc.js', // 入口文件的命名规则，若需要入口文件也加.pc后缀可配置
    chunkFilename: 'js/[name].pc.js'
  },
  optimization: {
    runtimeChunk: {
      name: 'runtime.pc'
    },
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors.pc',
          chunks: 'all'
        }
      }
    }
  }
}

注意事项 #

• 配置完成后，Webpack会自动更新html-webpack-plugin注入的脚本路径，无需手动修改HTML模板中的引入代码
• 若项目中有自定义的chunk命名规则，注意避免名称冲突

内容的提问来源于stack exchange，提问作者mecha kucha