plugin minicssextractplugin mini reactjs webpack

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.