vueCli，vue.config.js配置plugins（HashedModuleIdsPlugin或者NamedChunksPlugin）打包生产不生效的解决方案

vueCli，vue.config.js配置plugins（HashedModuleIdsPlugin或者NamedChunksPlugin）打包生产不生效的解决方案

原因分析

由于vueCli使用了默认的一些plugins，其中就包括

{
  VueLoaderPlugin,
  DefinePlugin,
  CaseSensitivePathsPlugin,
  FriendlyErrorsWebpackPlugin,
  MiniCssExtractPlugin,
  OptimizeCssnanoPlugin,
  HashedModuleIdsPlugin {
    options: {
      context: null,
      hashFunction: 'md4',
      hashDigest: 'hex',
      hashDigestLength: 4
    }
  },
  NamedChunksPlugin { nameResolver: [Function] },
  HtmlWebpackPlugin,
  PreloadPlugin,
  CopyPlugin

如果你在configureWebpack中追加了同样的插件，那么就有可能不生效，因为有些插件只会生效第一个，也就是谁在前面谁有效

解决方案

module.exports = {
    configureWebpack: (config)=>{
        const plugins = config.plugins;
        for(let i=0;i<plugins.length;i++){
            if(plugins[i] instanceof webpack.HashedModuleIdsPlugin){
                plugins.splice(i,1)
            }else if(plugins[i] instanceof webpack.NamedChunksPlugin){
                plugins.splice(i,1)
            }
        }
        plugins.push(new webpack.HashedModuleIdsPlugin({//生成稳定的模块id
            hashDigest: 'hex',
            hashDigestLength:8
        }));
        plugins.push(new webpack.NamedChunksPlugin((chunk) => {//生成稳定的chunk id
            if (chunk.name) {
                return chunk.name;
            }
            return "W"+(++id)
        }));
        return  void 0
    }
};

1. 你可以强行删除原来的默认配置，然后将你的配置push进去。亲测有效
2. 直接用config.plugins.unshift(“插件1”,“插件2”),没测过，应该有效

如何排查这个问题

1. 打开package.json，找到运行build命令 “build”: “vue-cli-service build”
2. 找到 vue-cli-service 指令 node_modules/.bin/vue-cli-service
3. 找到node启动命令 node “$basedir/../@vue/cli-service/bin/vue-cli-service.js""$@”
4. 根据位置找到vue-cli-service.js文件
5. 找到 service.run 函数
6. 在函数内找到 command 命令 也就是build
7. 根据command命令的url ‘./commands/build’ 查看command命令对应的启动文件
8. 找到build文件夹中的index.js
9. 找到上方js文件中的build函数，根据代码发现 webpackConfig = require(’./resolveAppConfig’)(api, args, options)
10. 找到 ‘./resolveAppConfig’ 文件
11. 在return new Promise 之前加一行 console.log(“webpackConfig.plugins”);
12. 重新运行npm run build 输出内容就可以看到具体的将会生效的plugins了
13. 排查冲突对象
14. 完成
15. 如果你的configureWebpack是个函数，你可以直接打印config，虽然也能知道，但是总感觉不稳，因为不知道内部流程到底干了啥

感谢阅读