webpack2 代码拆分和 CommonsChunkPlugin

我在使用代码拆分和CommonsChunkPlugin时遇到了问题。我习惯于require.js文件自动缓存的位置。我也在 webpack 配置中使用libraryTarget: 'amd'。

考虑到这两个简单的文件，这是我得到的输出：

// 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)

编辑：

我在 github 上创建了一个存储库，显示了我遇到的问题。根据Rafael De Leon的回答，我现在正在使用System.import('<module>')异步导入其他文件。main.ts通过此语法导入fileA.ts，导致在需要output.js(编译的main.ts文件)时出错。错误似乎发生在从output.js加载fileA...我还创建了一个 github 问题，因为我认为这是一个错误。

只有在加载脚本(如fileA)并将其作为依赖项(如requirejs)时，才应加载(供应商)库。

如果你想要这个结果，CommonsChunkPlugin不是你要找的。该插件是将不同条目或其他 CommonChunkPlugin 使用的文件聚合到一个文件中。

我认为您正在寻找的import()或require.ensure按需加载"供应商"文件

否则如何单独捆绑供应商脚本并根据需要使用 Webpack 来要求它们？将工作

相关内容

最新更新

热门标签：