webpack2码分裂与CommonsChunkPlugin
我遇到了一个使用代码分割和CommonsChunkPlugin的问题。我习惯于自动缓存文件的require.js。我也使用libraryTarget: 'amd'作为我的webpack配置。
考虑到这两个简单的文件，我得到的输出如下：
// fileA.js
import $ from 'jquery'
// fileB.js
import $ from 'jquery'
Asset Size Chunks Chunk Names
fileB.js 271 kB 0 [emitted] [big] fileB
fileA.js 271 kB 1 [emitted] [big] fileA所以这两个文件，fileA和fileB都包含了jquery。而且，我能够在我的html文件中使用这样的文件。
require(['./dist/fileA.js', './dist/fileB.js'], function () {
})根据文档，我可以使用CommonsChunkPlugin将jquery提取到它自己的文件中，所以我的配置如下所示：
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
}),因此产生了这一产出：
Asset Size Chunks Chunk Names
fileB.js 635 bytes 0 [emitted] fileB
fileA.js 617 bytes 1 [emitted] fileA
common.js 274 kB 2 [emitted] [big] common但是现在我不能使用上面的require块，因为common.js还包括webpack运行时。我现在得到的只是一个Uncaught ReferenceError: webpackJsonp is not defined错误。
所以我需要的是：
- fileA.js (只包含"fileA“代码，需要jquery)
- fileB.js (只包含"fileB“代码，需要jquery)
- jquery.js (所有jquery内容)
- common.js (只包含webpack的运行时)
我已经为fileA和fileB尝试过这样的方法，但基本上是相同的输出：
define(['jquery'], function ($) {
})只有在加载了脚本(如fileA)并将其作为依赖项(与对需求一样)时，才应该加载(Vendor)库。
这能做到吗？我浏览了许多次webpack2文档，但是找不到任何能帮助我的东西.
编辑:好，在一些github问题的帮助下，我成功地通过以下配置获得了正确的资产生成：
module.exports = {
entry: {
jquery: ['jquery'],
vue: ['vue'],
fileA: ['./src/fileA.js'],
fileB: ['./src/fileB.js'],
fileC: ['./src/fileC.js']
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist',
filename: '[name].js',
libraryTarget: 'amd'
}
}
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.optimize.CommonsChunkPlugin({
name: ['vue', 'jquery']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: ['vue', 'jquery'],
minChunks: Infinity
}),
new webpack.optimize.OccurrenceOrderPlugin()
])我将源文件更改为：
// fileA.js
import $ from 'jquery'
import Vue from 'vue'
// fileB.js
import $ from 'jquery'
// fileC.js
import Vue from 'vue'这是输出：
vue.js 193 kB 0 [emitted] vue
fileC.js 447 bytes 1 [emitted] fileC
fileB.js 579 bytes 2 [emitted] fileB
fileA.js 666 bytes 3 [emitted] fileA
jquery.js 269 kB 4 [emitted] [big] jquery
common.js 5.78 kB 5 [emitted] common但是，在像so这样的.html文件中使用它会导致以下错误：
<body>
<script src="./dist/common.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>
<script>
require(['./dist/fileA.js', './dist/fileB.js', './dist/fileC.js'], function (a, b, c) {
})
</script>
</body>fileA和fileC都会发生以下错误.
common.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (common.js:55)
at Object.7 (fileA.js:16)
at __webpack_require__ (common.js:55)
at Object.6 (fileA.js:6)
at __webpack_require__ (common.js:55)
at webpackJsonpCallback (common.js:26)
at fileA.js:1
at Object.execCb (require.js:1696)
at Module.check (require.js:883)
at Module.enable (require.js:1176)编辑：
我创建了一个github上的回购，显示我遇到的问题。根据Rafael的回答，我现在使用System.import('<module>')异步导入其他文件。main.ts通过此语法导入fileA.ts，当需要output.js (已编译的main.ts文件)时会导致错误。当fileA从output.js上加载时，似乎会发生错误.我还创建了一个github问题，因为我认为它是一个bug。
回答 1
Stack Overflow用户
发布于 2017-07-04 16:59:12
只有在加载了脚本(如fileA)并将其作为依赖项(与对需求一样)时，才应该加载(Vendor)库。
如果你想要这个结果，CommonsChunkPlugin不是你想要的。该插件是将不同条目或其他CommonChunkPlugin使用的文件聚合到一个文件中。
我认为您希望import()或require.ensure按需加载“供应商”文件。
https://stackoverflow.com/questions/44908701
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号