使用extract-text-webpack-plugin React时窗口未定义错误 [英] window not defined error when using extract-text-webpack-plugin React

问题描述

我正在使用 webpack 来构建我的 React 组件，并且我正在尝试使用 extract-text-webpack-plugin 将我的 css 与我生成的 js 文件分开.但是，当我尝试构建组件时，出现以下错误:模块构建失败:ReferenceError: window is not defined.

I'm using webpack to build my react components and I'm trying to use the extract-text-webpack-plugin to separate my css from my generated js file. However, when I attempt to build the component I get the following error: Module build failed: ReferenceError: window is not defined.

我的 webpack.config.js 文件如下所示:

My webpack.config.js file looks like this:

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 作为 extract 中的 before 参数代码>函数.

You may want to use style-loader as a before argument in extract function.

这是本机实现:

    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.

这篇关于使用extract-text-webpack-plugin React时窗口未定义错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！