reactjs - 使用 extract-text-webpack-plugin React 时出现窗口未定义错误

Question

我正在使用 webpack 构建我的 React 组件，并尝试使用 extract-text-webpack-plugin 将我的 css 与生成的 js 文件分开。但是，当我尝试构建该组件时，出现以下错误: 模块构建失败:ReferenceError:窗口未定义。

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

Answer 1

您可能希望在 extract 函数中使用 style-loader 作为 before 参数。

这是 native 实现:

    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。