Webpack2

Fri, Feb 5, 2021 One-minute read

Los loaders nos van a ayudar a transformar direntes tipos de archivos. Esta es una prueba de como usar el loader para insertar CSS. Creamos un archivo estilo.css en al misma carpeta y en el main.js requerimos el css: require(’./estilo.css’) Instalamos el css-loader: npm install css-loader –save-dev

Cargamos el loader en el package json de esta manera.

module:{ rules:[ { test: /.css$/, use: ‘css-loader’ } ] }

Básicamente estamos diciendo en la opción test que lea cualquier cosa que termine en .css y lo transforme con css-loader. Ahora si ejecutamos : npm run build Vemos que compila bien, pero en la web no vemos cambios. Esto es porque si que compila el css pero no lo incrusta en el código, para eso se necesita style-loader npm install style-loader Ahora tenemos que añadir esto al webpack.config.js que quería así:

var webpack = require(‘webpack’); var path = require(‘path’);

module.exports = { entry: ‘./src/main.js’, output: { path: path.resolve(__dirname, ‘./dist’), filename: ‘app.js’ }, module:{ rules:[ { test: /.css$/, use: [‘style-loader’, ‘css-loader’] } ] } };