reactjs - minicssextractplugin - minify css webpack 4
error de ventana no definida al usar extract-text-webpack-plugin React (4)
Estoy usando webpack para construir mis componentes de reacción y estoy tratando de usar el
extract-text-webpack-plugin
para separar mi css del archivo js generado.
Sin embargo, cuando intento compilar el componente,
Module build failed: ReferenceError: window is not defined
el siguiente error:
Module build failed: ReferenceError: window is not defined
: Error de
Module build failed: ReferenceError: window is not defined
.
Mi archivo webpack.config.js tiene este aspecto:
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'')
]
}
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 importante al pasar de V1 a V2.
https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change
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'')
Es posible que desee utilizar
style-loader
como argumento
before
en la función de
extract
.
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("!");
}
};
Básicamente, lo que debes hacer es:
{
test: //.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(''style-loader'', ''css!sass?indentedSyntax=true&sourceMap=true'')
},
si por ejemplo usa
sass
.
No vi una explicación de la causa, así que publiqué esta respuesta aquí.
Desde 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) el (los) cargador (es) que se deben usar cuando no se extrae el CSS (es decir, en un> fragmento adicional cuando allChunks: falso)
loader
los cargadores que se deben usar para convertir el recurso en un módulo de exportación CSS.
options
publicPath
anula la configuración publicPath para este cargador.
El método
#extract
debería recibir un cargador que
#extract
css
.
Lo que estaba sucediendo era que estaba recibiendo un
style-loader
que
generaba código javascript
, que estaba destinado a ser inyectado en una página web.
Este código intentaría acceder a la
window
.
No debe pasar una cadena de cargador con
style
a
#extract
.
Sin embargo ... si configura
allChunks=false
, no generará 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 debe entenderse en profundidad o puede encontrarse con muchos problemas extraños.