extract-text-webpack-pluginReactを使用するときにウィンドウが定義されていないエラー

Question 1

私はwebpackを使用してreactコンポーネントを構築しており、を使用しextract-text-webpack-pluginてcssを生成されたjsファイルから分離しようとしています。ただし、コンポーネントをビルドしようとすると、次のエラーが発生します Module build failed: ReferenceError: window is not defined。

私のwebpack.config.jsファイルは次のようになります。

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    MainComponent: './src/main.js'
  },
  output: {
    libraryTarget: 'var',
    library: 'MainComponent',
    path: './build',
    filename: '[name].js'
  },
  module: {
    loaders: [{
      test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader')
    }]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
}

Question 2

関数の引数style-loaderとして使用することをお勧めします。beforeextract

ネイティブ実装は次のとおりです。

    ExtractTextPlugin.extract = function(before, loader, options) {
        if(typeof loader === "string") {
            return [
                ExtractTextPlugin.loader(mergeOptions({omit: before.split("!").length, extract: true, remove: true}, options)),
                before,
                loader
            ].join("!");
        } else {
            options = loader;
            loader = before;
            return [
                ExtractTextPlugin.loader(mergeOptions({remove: true}, options)),
                loader
            ].join("!");
        }
    };

つまり、基本的にあなたがする必要があるのは：

{
    test: /\.sass$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true')
},

たとえば、を使用する場合sass。

Question 3

原因の説明が見当たらないので、この回答をここに投稿しました。

https://github.com/webpack/extract-text-webpack-plugin#apiから

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) 既存のローダーから抽出ローダーを作成します。

notExtractLoader （オプション）cssが抽出されない場合に使用する必要があるローダー（つまり、allChunks：falseの場合は>追加のチャンク内）

loader リソースをcssエクスポートモジュールに変換するために使用する必要があるローダー。

options

publicPath このローダーのpublicPath設定をオーバーライドします。

#extractこの方法は、その出力ローダーを受けるべきですcss。何が起こっていたのかというと、ウェブページに挿入することを目的としたjavascriptコードstyle-loaderを出力するが受信されていたということです。このコードはにアクセスしようとします。window

ローダー文字列をstyleに渡さないでください#extract。ただし...を設定するとallChunks=false、初期チャンク以外のCSSファイルは作成されません。したがって、ページに挿入するために使用するローダーを知る必要があります。

ヒント：Webpackは、本当に深く理解する必要があるツールです。そうしないと、多くの奇妙な問題が発生する可能性があります。

Question 4

Webpack 2

Webpack 2を使用している場合、このバリエーションは機能します。

    rules: [{
        test: /\.css$/,
        exclude: '/node_modules/',
        use: ExtractTextPlugin.extract({
            fallback: [{
                loader: 'style-loader',
            }],
            use: [{
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                },
            }, {
                loader: 'postcss-loader',
            }],
        }),
    }]

新しいextractメソッドは3つの引数をとらなくなり、V1からV2に移行する際の重大な変更としてリストされます。

https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change

Question 5

私は自分の問題の解決策を見つけました：

ローダーを相互に配管する代わりに（ExtractTextPlugin.extract('style-loader!css-loader')）、各ローダーを個別のパラメーターとして渡す必要があります。ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')