Question

我跟随Maxime Fabre's tutorial on Webpack并试图获得一个非常简单的webpack包，其中包含1个入口点和2个块。由于两个块都需要jquery和mustache，我使用CommonsChunkPlugin将公共依赖项移动到主bundle文件，就像在教程中一样。我还使用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*/));
    }
}

的index.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。当我禁用extract-text-webpack-plugin或CommonsChunkPlugin并构建它时，webpack包工作得很漂亮。

然而，即使我正在使用2个非常常见的插件进行简单的教程，但这个错误似乎很少见，所以我假设我在某个地方弄乱了。是什么给了什么？

Webpack缺少使用CommonsChunk和extract-text-webpack-plugin的模块

0 个答案: