Pregunta error de ventana no definida al usar extract-text-webpack-plugin Reaccionar


Estoy usando el paquete web para construir mis componentes de reacción y estoy tratando de usar el extract-text-webpack-plugin para separar mi CSS de mi archivo js generado. Sin embargo, cuando intento construir el componente, aparece el siguiente error: Module build failed: ReferenceError: window is not defined.

Mi archivo webpack.config.js se ve así:

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

76
2018-01-29 19:31


origen


Respuestas:


Es posible que desee utilizar style-loader como un before argumento en extract función.

Aquí está la implementación nativa:

    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("!");
        }
    };

Entonces básicamente lo que tienes que hacer es:

{
    test: /\.sass$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true')
},

si, por ejemplo, usa sass.


59
2018-06-22 14:11



No vi una explicación de la causa, así que he publicado esta respuesta aquí.

De https://github.com/webpack/extract-text-webpack-plugin#api

ExtractTextPlugin.extract([notExtractLoader], loader, [options])   Crea un cargador de extracción de un cargador existente.

notExtractLoader (opcional) los cargadores que se deben usar cuando no se extrae el css (es decir, en un> trozo adicional cuando allChunks: falso)

loader el (los) cargador (es) que deben usarse para convertir el recurso a un módulo de exportación CSS.

options

publicPath anula la configuración publicPath para este cargador.

los #extract método debe recibir un cargador que salidas css. Lo que sucedía era que estaba recibiendo un style-loader que salidas código javascript, que está destinado a ser inyectado en una página web. Este código intentaría acceder window.

No debe pasar una cadena de cargador con style a #extract. Sin embargo ... si estableces allChunks=false, entonces no creará archivos CSS para fragmentos no iniciales. Por lo tanto, necesita saber qué cargador usar para inyectar en la página.

Consejo: Webpack es una herramienta que realmente necesita ser entendida en profundidad o puede encontrarse con muchos problemas extraños.


41
2018-02-12 17:58



Webpack 2

Si está utilizando Webpack 2, esta variación funciona:

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

El nuevo método de extracción ya no toma tres argumentos, y aparece como un cambio de ruptura al pasar de V1 a V2.

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


19
2018-02-12 15:49



Descubrí la solución a mi problema:

En lugar de conectar los cargadores entre sí (ExtractTextPlugin.extract('style-loader!css-loader')), debe pasar cada cargador como un parámetro separado: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')


12
2017-11-06 16:28