带有Webpack 4的Chrome扩展程序会生成错误输出

Question

我的网络包配置..

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()], 
    }]);
  });
});

My Manifest ..

{
  "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'"
}

的问题...

当我加载我的扩展程序时......没有执行任何内容......

这是我的web.生成的background.js ......

Answer 1

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

optimization : {
  runtimeChunk : true,
},

在webpack配置中，为：

optimization : {
  runtimeChunk : false,
},

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