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

Question

我有一个使用大包的项目（dexie.js 并不是说它对这个问题很重要），我想 'split out' 到我可以包含的自己的包中手动，因为它只在我的几个入口点脚本中需要。

只是想让你知道：我的 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
]
}

问题是我没有典型的 'vendor' 或 'common' 要求，就像许多其他项目一样。在少数情况下，我只想要包含 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 以通常使用 'vendor' 和 'common' 的方式工作。即：

    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

首先，使用'js/xxx.js'作为词条名并不是一个好办法。如果您的 options.js 需要 dexie.js 而 popup.js 则不需要。您可以尝试像下面这样更改文件。

webpack.config.js

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
}),

就像我之前说的，CommonChunksPlugin 会自动帮助你提取公共依赖，在这种情况下你不需要编写 minChunks 的函数来指示依赖。

options.html

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

popup.html

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

Answer 2

我偶然发现了@prograhammer 的这个优秀答案：

里面他提到了Externals插件，这个我以前没听过，很巧妙的解决了我的问题。这是来自 webpack 站点的描述：

For example, to include jQuery from a CDN instead of bundling it:

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'
}
This leaves any dependent modules unchanged, i.e. the code shown below will still work:
import $ from 'jquery';

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

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

Using CommonsChunkPlugin without always needing to define webpackJsonp?

javascript

webpack

dexie

webpack-2