extract-text-webpack-plugin React를 사용할 때 창 정의되지 않음 오류

extract-text-webpack-plugin React를 사용할 때 창 정의되지 않음 오류

---

내 반응 구성 요소를 빌드하기 위해 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')
  ]
}

---

함수 style-loader에서 before인수 로 사용할 수 있습니다 extract.

다음은 기본 구현입니다.

    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.

---

원인에 대한 설명을 보지 못 했으므로 여기에이 답변을 게시했습니다.

에서 https://github.com/webpack/extract-text-webpack-plugin#api

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) 기존 로더에서 추출 로더를 만듭니다.

notExtractLoader (optional) the loader(s) that should be used when the css is not extracted (i.e. in an > additional chunk when allChunks: false)

loader the loader(s) that should be used for converting the resource to a css exporting module.

options

publicPath override the publicPath setting for this loader.

The #extract method should receive a loader that outputs css. What was happening was that it was receiving a style-loader which outputs javascript code, which is intended to be injected into a webpage. This code would try to access window.

You should not pass a loader string with style to #extract. However...if you set allChunks=false, then it will not build CSS files for non-initial chunks. Therefore it needs to know what loader to use to inject into the page.

Tip: Webpack is a tool that really needs to be understood in-depth or you can run into lots of strange issues.

---

Webpack 2

If you're using Webpack 2, this variation works:

    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',
            }],
        }),
    }]

The new extract method no longer takes three arguments, and is listed as a breaking change when moving from V1 to V2.

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

---

I figured out the solution to my problem:

Instead of piping the loaders into one another (ExtractTextPlugin.extract('style-loader!css-loader')), you have to pass in the each loader as a separate parameter: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')

참고URL : https://stackoverflow.com/questions/28223040/window-not-defined-error-when-using-extract-text-webpack-plugin-react