使用Webpack 4构建Chrome扩展程序时输出结果异常

嘿，我看了你用Webpack 4构建Chrome扩展时碰到的输出错误问题，结合你给出的配置和极简的background代码，我梳理了几个大概率能解决问题的方向：

1. 修正include路径的绝对路径问题 #

你的module.rules里的include: ['src']用了相对路径，但Webpack对include字段的要求是绝对路径，否则可能无法正确匹配到src目录下的文件，导致babel-loader压根没处理你的代码。把它改成用resolve生成绝对路径就好：

module: {
  rules: [{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    // 改成绝对路径
    include: [resolve('src')],
    use: {
      loader: 'babel-loader',
      query: {cacheDirectory: true},
    },
  }],
}

2. 调整或移除publicPath配置 #

Chrome扩展的资源加载逻辑是基于扩展根目录的，你设置的publicPath: './'反而可能导致路径解析混乱。建议直接移除这个配置，或者设为空字符串：

output: {
  path: resolve('dist'),
  filename: '[name].js',
  // 移除这行，或者改成publicPath: ''
  // publicPath: './',
},

3. 暂时移除ModuleConcatenationPlugin #

Webpack 4的这个模块串联插件虽然能优化打包体积，但在Chrome扩展的独立执行环境（比如背景脚本）里，可能会引发作用域冲突问题。先尝试注释掉这个插件，看看是否能解决输出错误：

plugins: [
  // 先注释掉这个插件测试
  // new webpack.optimize.ModuleConcatenationPlugin(),
],

4. 替换废弃的babel-polyfill #

babel-polyfill已经被官方废弃了，而且Chrome的V8引擎本身就支持大部分ES6+特性，背景脚本完全没必要引入全局polyfill。如果确实需要兼容旧版本Chrome，建议改用core-js按需引入：
首先安装依赖：

npm install core-js@3 regenerator-runtime --save

然后修改entry和babel配置：

entry: {
  background: ['core-js/stable', 'regenerator-runtime/runtime', resolve('src', 'background.js')],
},
module: {
  rules: [{
    // ...其他配置不变
    use: {
      loader: 'babel-loader',
      query: {
        cacheDirectory: true,
        presets: [
          ['@babel/preset-env', {
            useBuiltIns: 'usage',
            corejs: 3
          }]
        ]
      },
    },
  }],
}

修改完这些配置后，重新执行打包命令（比如npm run build），检查dist目录下的background.js是否正常生成，再加载到Chrome扩展里测试应该就能解决问题了。

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