【发布时间】：2017-12-08 02:06:23
【问题描述】：
我在使用代码拆分和 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）并将其作为依赖项（与 requirejs 一样）时，才应加载（供应商）库。
这可以实现吗？我浏览了无数次 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
但是，像这样在.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)
编辑：
我创建了一个repo on github 来显示我遇到的问题。根据 Rafael De Leon 的回答，我现在使用System.import('<module>') 异步导入其他文件。 main.ts 通过这种语法导入fileA.ts，导致需要output.js（编译后的main.ts 文件）时出错。当 fileA 从 output.js 加载时似乎会发生错误...我还创建了一个 github issue，因为我认为这是一个错误。
【问题讨论】：
标签： javascript requirejs webpack-2