vuecli with webextensions：预编译和加载内容脚本

Question

我正在用vuejs&CCD_ 2。我已经添加了要用vue-cli的内部webpack处理的内容脚本，s.t.：

configureWebpack: {
entry: {
contentScript: "./src/contentScript/contentScript.js"
}

汇编工作。我正在获取一个contentScript.js，一个捆绑在网络包中的文件。但是，当我尝试使用加载此文件时

chrome.tabs.executeScript({
file: "js/contentScript.js"
});

什么也没发生。事实上，即使contentScript.js只包含console.log('test')，它似乎也不会像我想象的那样被webpack处理，因为在浏览器控制台中执行脚本不会产生任何结果。

我在这里监督什么？从vue inspect，我可以看到以下webpack-js的规则：

/* config.module.rule('js') */
{
test: /.m?jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
{
loader: '/home/user/Coding/webext/node_modules/cache-loader/dist/cjs.js',
options: {
cacheDirectory: '/home/user/Coding/webext/node_modules/.cache/babel-loader',
cacheIdentifier: '356420a0'
}
},
{
loader: '/home/user/Coding/webext/node_modules/babel-loader/lib/index.js'
}
]
},

Answer 1

我终于想通了！这是因为splitChunks将所有node_module资产捆绑在一个vendor块中。由于我的contentScript.js-脚本没有加载这个vendor-块，webpack无法完成它的任务。这似乎是因为webpack本身需要一些ES-node_modules。如果vue-cli0让我知道它缺少了一大块，那真的会很有帮助，但哦，好吧。。。vue.config.js中的必要配置是：

chainWebpack: config => {
config.optimization.splitChunks(false);
}