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

Question 1

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

Question 2

함수 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.

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. 무슨 일이 일어 났는지 웹 페이지에 삽입되도록 의도 된 자바 스크립트 코드style-loader 를 출력 하는 을 수신하고있었습니다 . 이 코드는 .window

당신과 로더 문자열을 전달하지 말아야 style로 #extract. 그러나 ...를 설정하면 allChunks=false초기가 아닌 청크에 대한 CSS 파일을 빌드하지 않습니다. 따라서 페이지에 삽입하는 데 사용할 로더를 알아야합니다.

팁 : Webpack은 정말로 깊이 이해해야하는 도구입니다. 그렇지 않으면 이상한 문제가 많이 발생할 수 있습니다.

Question 4

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

새 추출 방법은 더 이상 세 개의 인수를 사용하지 않으며 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')