83

我正在使用 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')
  ]
}
4

4 回答 4

60

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

于 2015-06-22T14:11:46.660 回答
43

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

来自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 是一个真正需要深入理解的工具，否则您可能会遇到很多奇怪的问题。

于 2016-02-12T17:58:33.827 回答
20

网页包 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',
            }],
        }),
    }]

新的 extract 方法不再需要三个参数，并且在从 V1 移动到 V2 时被列为重大更改。

https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-break-change

于 2017-02-12T15:49:19.800 回答
12

我想出了解决问题的方法：

ExtractTextPlugin.extract('style-loader!css-loader')您必须将每个加载器作为单独的参数传入，而不是通过管道将加载器相互连接（ ）：ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')

于 2015-11-06T16:28:15.443 回答