我正在跟进Maxime Fabre 的 Webpack 教程 https://blog.madewithlove.be/post/webpack-your-bags/我正在尝试获得一个非常简单的 webpack 包，其中包含 1 个入口点和 2 个工作块。由于这两个块都需要 jquery 和 Mustache，因此我使用 CommonsChunkPlugin 将公共依赖项移至主包文件，就像教程中一样。我也在用提取文本 webpack 插件 https://www.npmjs.com/package/extract-text-webpack-plugin从块中提取样式并将它们放入单独的 CSS 文件中。
我的 webpack.config.js：
var ExtractPlugin = require("extract-text-webpack-plugin");
var plugins = [
new ExtractPlugin("bundle.css"),
new webpack.optimize.CommonsChunkPlugin({
name: "vendors", //move dependencies to our main bundle file
children: true, //look for dependencies in all children
minChunks: 2 //how many times a dependency must come up before being extracted
})
];
module.exports = {
/*...*/
entry: "./src/index.js",
output: {
/*...*/
},
plugins: plugins,
module: {
loaders: [
/*...*/
{
test: /\.scss$/,
loader: ExtractPlugin.extract("style", "css!sass")
//loaders: ["style", "css", "sass"]
},
/*...*/
]
}
};
入口点中的相关代码（我使用ES6语法和babel）：
import "./styles.scss";
/*if something is in the page*/
require.ensure([], () => {
new (require("./Components/Chunk1").default)().render();
});
/*if something else is in the page*/
require.ensure([], () => {
new (require("./Components/Chunk2").default)().render();
});
chunk1 和 chunk2 看起来都是这样的：
import $ from "jquery";
import Mustache from "mustache";
/*import chunk templates and scss*/
export default class /*Chunk1or2*/ {
render() {
$(/*some stuff*/).html(Mustache.render(/*some other stuff*/));
}
}
索引.html：
<html>
<head>
<link rel="stylesheet href="build/bundle.css">
</head>
<body>
<script src="/build/main.js"></script>
</body>
</html>
当我跑步时webpack该捆绑包构建得很好。但是，在浏览器中我得到一个Uncaught TypeError: Cannot read property 'call' of undefined，经过仔细检查，似乎有几个模块最终成为undefined在最后的捆绑包中。
我的错误看起来很像https://github.com/wenbing/webpack-extract-text-commons-chunk-bug https://github.com/wenbing/webpack-extract-text-commons-chunk-bug。当我禁用 extract-text-webpack-plugin 或 CommonsChunkPlugin 并构建它时，webpack 捆绑包工作得很好。
然而，尽管我正在遵循一个带有两个非常常见的插件的简单教程，但该错误似乎很少见，所以我假设我在某个地方搞砸了。是什么赋予了？
