extract-text-webpack-plugin React 사용 시 window not defined 오류 발생

extract-text-webpack-plugin React 사용 시 window not defined 오류 발생

리액션 컴포넌트를 작성하기 위해 웹 팩을 사용하고 있으며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(임의) css가 추출되지 않았을 때 사용하는 로더(allChunks: false일 경우 > 추가 청크 내)

loader리소스를 css 내보내기 모듈로 변환하기 위해 사용되는 로더.

options

publicPath이 로더의 publicPath 설정을 재정의합니다.

그#extract메서드는 출력하는 로더를 수신해야 합니다.css무슨 일이 있었냐면요.style-loader웹 페이지에 삽입하기 위한 Javascript 코드를 출력합니다.이 코드로 접속하려고 합니다.window.

로더 스트링을 전달하지 마십시오.style로.#extract하지만...설정하시면allChunks=false초기 이외의 청크에 대한 CSS 파일은 구축되지 않습니다.따라서 페이지에 삽입하기 위해 어떤 로더를 사용해야 하는지 알아야 합니다.

힌트: Webpack은 정말 깊이 이해할 필요가 있는 도구입니다.그렇지 않으면 많은 이상한 문제에 직면할 수 있습니다.

웹 팩 2

Web pack 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/ #syslogtextwebpackplugin-breaking-change

나는 내 문제에 대한 해결책을 알아냈다.

로더를 서로 연결하는 대신ExtractTextPlugin.extract('style-loader!css-loader')), 각 로더를 별도의 파라미터로 전달해야 합니다.ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')

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