Question

我有一个项目，它使用一个大的包（dexie.js而不是对这个问题很重要），我想把它“拆分”成我自己的包，我可以手动包含，因为它仅在我的一些入口点脚本中需要。

大家知道：我的webpack配置使用多个模块，有多个（6）入口点，所以这是我webpack.config.js的简化示例：

{
context: path.join(__dirname, 'src'),
entry: {
    'js/contentscript.js' : './js/contentscript.js',
    'js/background.js'    : './js/background.js',
    'js/popup.js'         : './js/popup.js',
    'js/options.js'       : './js/options.js',
},
output: {
    path: path.join(__dirname, 'dist'), 
    filename: "[name]"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "dexie",
        filename: "js/dexie.js",
        minChunks: function (module) {
            // this assumes your vendor imports exist in the node_modules directory
            return module.context && module.context.includes("node_modules/dexie");
        }
    }),
    ... // other non relevant plugins here
]
}

问题在于我没有像许多其他项目那样典型的“供应商”或“共同”要求。在少数情况下，我只想 ，我想要包含js/dexie.js捆绑包。

例如。在options.html，我有这个：

<script src="js/dexie.js"></script> <script src="js/options.js"></script>

...但我不希望它被用于popup.html，我想保留它：

<script src="js/popup.js"></script>

由于这也是一个WebExtensions项目，我肯定不希望我的内容脚本需要它！

问题是，当我打开popup.js时，我收到错误：Uncaught ReferenceError: webpackJsonp is not defined。

有没有办法 - 没有把它分成更多的webpack模块 - 这样CommonsChunkPlugin就可以很好地使用入口点，这样只有我想要的才会受到影响它？

我能想到的唯一解决方案是制作另一个CommonsChunkPlugin，其行为方式通常是“供应商”和“常见”。那就是：

new webpack.optimize.CommonsChunkPlugin({ name: "dexie", filename: "js/dexie.js", minChunks: function (module) { // this assumes your vendor imports exist in the node_modules directory return module.context && module.context.includes("node_modules/dexie"); } }), new webpack.optimize.CommonsChunkPlugin({ name: "manifest", filename: "js/manifest.js", minChunks: Infinity }),

不幸的是，这意味着我需要在所有我的脚本中加入js/manifest.js，因为这是一个WebExtension，那么这意味着我必须将它注入每个内容页面......恕我直言，这是一个可怕的解决方案。

有关如何改善这一点的任何想法？我错误地使用CommonsChunkPlugin了吗？我应该使用更好的模块吗？（我实际上还是要掌握webpack！）

Answer 1

首先，使用＆＃39; js / xxx.js＆＃39;作为一个条目名称不是一个好方法。如果你的options.js需要dexie.js和popup.js不需要它。您可以尝试更改以下文件。

webpack.config.js

{..}

就像我之前说过的，CommonChunksPlugin会自动帮助你提取常见的依赖关系，在这种情况下你不需要编写一个minChunks函数来表示依赖关系。

options.html

.txt

popup.html

entry: {
    'vendor' : ['dexie'],
    'contentscript' : './js/contentscript.js',
    'background'    : './js/background.js',
    'popup'         : './js/popup.js',
    'options'       : './js/options.js',
},
resolve: {
    alias: {
        'dexie':'...'
    }
},
new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    minChunks: Infinity
}),

Answer 2

我偶然发现了@prograhammer：https://stackoverflow.com/a/40416826/125525

这个优秀的答案

在其中他引用了Externals插件，这是我之前从未听说过的，它巧妙地解决了我的问题。这是来自webpack网站的描述：

例如，要从CDN中包含jQuery而不是捆绑它：

的index.html
<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
webpack.config.js
externals: {
  jquery: 'jQuery'
}
这使得任何相关模块保持不变，即下面显示的代码仍然会有效：
import $ from 'jquery';

$('.my-element').animate(...);

使用CommonsChunkPlugin而不总是需要定义webpackJsonp？

2 个答案: