2

私はWebpack に関する Maxime Fabre のチュートリアルに従っており、1 つのエントリ ポイントと 2 つのチャンクを使用して機能する非常に単純な Webpack バンドルを取得しようとしています。どちらのチャンクにも 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 構文とバベルを使用しています):

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();
});

チャンク 1 とチャンク 2 はどちらも次のようになります。

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 つの非常に一般的なプラグインを使用した簡単なチュートリアルに従っているにもかかわらず、バグはまれであるように思われるため、どこかで失敗していると思います。何を与える？

4

0 に答える 0