2

我正在关注Maxime Fabre 关于 Webpack 的教程，并试图获得一个非常简单的 webpack 包，它有 1 个入口点和 2 个块来工作。因为这两个块都需要 jquery 和 mustache，所以我使用 CommonsChunkPlugin 将公共依赖项移动到主包文件，就像在教程中一样。我还使用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。当我禁用 extract-text-webpack-plugin 或 CommonsChunkPlugin 并构建它时，webpack 包运行良好。

然而，即使我正在学习一个包含 2 个非常常见的插件的简单教程，但这个错误似乎很少见，所以我假设我在某个地方搞砸了。是什么赋予了？

4

0 回答 0