webpack - 带有 Webpack 4 的 Chrome 扩展生成错误的输出

Question

我的 webpack 配置..

module.exports = {
    entry: {
        background: ['babel-polyfill', resolve('src', 'background.js')],
    },
    output: {
        path: resolve('dist'),
        filename: '[name].js',
        publicPath: './',
    },
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin(),
    ],
    resolve: {extensions: ['.js', '.jsx']},
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            include: ['src'],
            use: {
                loader: 'babel-loader',
                query: {cacheDirectory: true},
            },
        }],
    },
};

我的背景文件...

console.log('Background ready!'); // Exepect to print this!!
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color: '#3aa757' }, () => {
    console.log('The color is green.');
  });

  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: { hostEquals: 'developer.chrome.com' },
      }),
      ],
      actions: [new chrome.declarativeContent.ShowPageAction()], 
    }]);
  });
});

我的 list ..

{
  "name": "..",
  "version": "1.0",
  "description": "..",
  "manifest_version": 2,
  "permissions": [
    "activeTab",
    "declarativeContent",
    "storage"
  ],
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

问题...

当我加载我的扩展时..什么都没有执行...



这是我由 Webpack 生成的 background.js ......

Answer 1

我发现对我来说，webpack 4 在一个单独的包中创建了它的运行时。所以我改变了

optimization : {
  runtimeChunk : true,
},

在 webpack 配置中，要:

optimization : {
  runtimeChunk : false,
},

这导致 webpack 运行时成为输出包的一部分并由 chrome 执行。