Webpack extraer CSS a un archivo
Seguimos con la guia de Webpack, en este articulo aprenderemos a configurar nuestro entorno de desarrollo con webpack para que pueda extraer el css de los archivos Javascript, para lograrlo utilizaremos mini-css-extract-plugin, su configuración es muy parecida al componente de HTML.
Extracción de CSS en Webpack
Si vienens utilizando Webpack en versiones inferiores a la 4, te comento que extract-text-webpack-plugin ya no funciona y en palabras de Michael ciniawsky.-
xtract-text-webpack-plugin llegó a un punto en el que mantenerlo se convirtió en una carga demasiado pesada y no es la primera vez que actualizar a una versión de webpack importante fue complicado y engorroso debido a problemas con él.
Por este motivo ya no se utiliza, pero en su lugar estaremos utilizando mini-css-extract-plugin.
Para poder utilizarlo necesitamos webpack 4.2.0+.
Instalamos el plugin y css-loader y nos quedara de esta forma (incluyenda las optimizaciones anteriores).-
1
$ npm install -D mini-css-extract-plugin css-loader
Ahora vamos a configurar css-loader y el plugin en el archivo de configuración de webpack.-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // conf css
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{ // Conf css
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}), // Conf css
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
Ahora para utilizarlo es muy sencilo, en nuestro punto de entrada (index.js) vamos importar un archivo css.-
1
import style from './css/main.css';
Colocamos el siguiente contenido en nuestro archivo CSS.-
1
2
3
4
5
6
7
8
9
*
{
padding: 0;
margin: 0;
}
body
{
line-height: 2;
}
Y procedemos a Iniciar webpack.-
1
$ npm run dev
Al finalizar el proceso, veremos que en el directorio “dist”, aparece un archivo CSS y este archivo esta agregado al index.html.
Minimizar CSS para producción
Al inspeccionar el archivo css generado, noraras que el código no esta minificado, esto no es ningun problema ya que para producción podemos minifacorlo facilmente, instalamos las siguientes librerias.-
1
$ npm install -D optimize-css-assets-webpack-plugin
Y agregamos una configuración más a nuestro archivo “webpack.config.js”.-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
...
Con esto al ejecutar en modo producción, veremos que el archivo CSS generado esta minificado.-
1
$ npm run build
Conclusiones
Estamos a un paso de terminar de configurar nuestro entorno de desarrollo con webpack, solo nos falta ejecutar un servidor y poner a webpack en espera de cambios en el código.
Que tengan feliz código.