如何在vue-cli项目中修改webpack.render.config.js的白名单模块？

嘿，我来帮你搞定这个问题～首先得理清你的项目情况，因为vue-cli 3.x及以上版本默认不会直接暴露webpack配置文件，而webpack.render.config.js通常是和Electron渲染进程相关的配置文件，我分两种常见情况给你说明：

情况1：你的项目里直接存在webpack.render.config.js文件 #

如果你的项目是用electron-vue模板结合vue-cli创建的，或是手动生成了这个配置文件，操作就很直接：

• 找到项目中的webpack.render.config.js文件并打开
• 定位到代码行let whiteListedModules = ['vue'];
• 直接修改为let whiteListedModules = ['vue', 'element-ui'];
• 保存文件后重启开发服务器，新配置就会生效啦

情况2：vue-cli 3+/4+/5.x项目，无直接暴露的webpack配置文件 #

如果是用@vue/cli官方工具创建的项目，默认看不到webpack.render.config.js，这时候需要通过项目根目录的vue.config.js来修改（没有的话直接新建一个）：

• 假设你是在配置Electron渲染进程的webpack，在vue.config.js中添加以下代码：

  module.exports = {
    pluginOptions: {
      electronBuilder: {
        // 专门针对渲染进程的webpack配置修改
        chainWebpackRendererProcess: (config) => {
          // 重新定义白名单模块，替换原有配置逻辑
          config.externals((context, request, callback) => {
            const whiteListedModules = ['vue', 'element-ui'];
            if (whiteListedModules.includes(request)) {
              return callback(null, `commonjs ${request}`);
            }
            callback();
          });
        }
      }
    }
  }
  

• 如果不需要针对Electron，只是普通webpack配置调整，也可以用configureWebpack方式：

  module.exports = {
    configureWebpack: (config) => {
      // 针对渲染进程配置的判断（按需使用）
      if (config.target === 'electron-renderer') {
        config.externals = function(context, request, callback) {
          const whiteListedModules = ['vue', 'element-ui'];
          if (whiteListedModules.includes(request)) {
            return callback(null, `commonjs ${request}`);
          }
          callback();
        };
      }
    }
  }
  

• 保存vue.config.js后重启开发服务器，新配置就会生效了

最后提醒下：不管哪种方式，修改完配置一定要重启项目，不然webpack不会加载新的配置哦～

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