使用extract-text-webpack-plugin时,窗口未定义错误

Question

我正在使用webpack来构建我的反应组件,我正在尝试使用extract-text-webpack-plugin它将我的css与生成的js文件分开.但是,当我尝试构建组件时,我收到以下错误: 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')
  ]
}

Answer 1

您可能希望在函数中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.

Answer 2

没看到原因的解释所以我在这里发布了这个答案.

来自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.

你不应该使用styleto 传递一个加载器字符串#extract.但是......如果你设置了allChunks=false,那么就不会为非初始块构建CSS文件.因此,它需要知道用于注入页面的加载器.

提示:Webpack是一个真正需要深入理解的工具,或者您可能遇到许多奇怪的问题.

Answer 3

Webpack 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

Answer 4

我想出了我的问题的解决方案:

而不是将加载器管道连接到另一个(ExtractTextPlugin.extract('style-loader!css-loader')),您必须将每个加载器作为单独的参数传递:ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')