83

反応コンポーネントを構築するために webpack を使用しextract-text-webpack-pluginており、生成された js ファイルから css を分離するために を使用しようとしています。ただし、コンポーネントをビルドしようとすると、次のエラーが発生します: 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')
  ]
}
4

4 に答える 4

43

原因の説明が表示されなかったので、この回答をここに投稿しました。

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。何が起こっていたかというと、Web ページに挿入されることを意図したjavascript コードstyle-loaderを出力する を受け取っていたということです。このコードは にアクセスしようとします。window

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

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

于 2016-02-12T17:58:33.827 に答える
20

ウェブパック 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

于 2017-02-12T15:49:19.800 に答える
12

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

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

于 2015-11-06T16:28:15.443 に答える