Obviamente, teclear el comando en la terminal no es práctico. Además, cuando tienes múltiples operaciones que quieres realizar – compilar archivos LESS/Sass a CSS, CoffeeScript a Javascript y transponer ES6 a ES5, es mejor configurar webpack para que se encargue de las operaciones por nosotros. Aquí es donde entra el archivo webpack.config.js.
Crea un archivo en la carpeta raíz de tu proyecto y llámalo webpack.config.js. A continuación, instala babel y css-loader.
1npminstall style-loader css-loader babel-loader babel-core babel-preset-es2015 --save-dev
bash
Ahora en el archivo webpack.config.js:
123456789101112131415161718192021222324module.exports={ entry:[$0027./app.js$0027], output:{ path: nombre de archivo:$0027bundle.js$0027}, module:{ loaders:[{ test:/.js$/, exclude:/node_modules/, include: path. join(__dirname,$0027src$0027), loaders:[$0027babel$0027], query:{ presets:[$0027es2015$0027]}},{ test:/.css$/, loaders:[$0027style-loader!css-loader$0027]}}js
entrada
La propiedad de entrada te permite definir los archivos de nivel superior que queremos incluir en el paquete.
salida
El objeto de salida le permite definir la configuración de salida. La propiedad path define el camino a la raíz del proyecto. La propiedad filename define el nombre del archivo de salida.
cargadores de módulos
El conjunto de cargadores contiene las configuraciones de cada módulo de carga.
test – Mapeo de expresiones regulares a la extensión de los archivos a los que se quiere aplicar el módulo.
exclude – Mapeo de expresiones regulares a los archivos/carpetas que desea excluir
include – Archivos/carpeta que quieres incluir
Cargadores – Nombre(s) de los cargadores que quiere aplicar
presets – Permite a los webpack saber que tipo de código estamos escribiendo, en nuestro caso ES2015
Ahora que tenemos nuestro archivo de configuración listo, instalemos webpack-dev-server.
1npminstall webpack-dev-server -g
bash
Ahora corre:
1webpack-dev-server
bash
Abre tu navegador favorito y ve a http://localhost:8080/webpack-dev-server/ para ver la aplicación en funcionamiento. Si haces un cambio en tus archivos fuente, webpack ejecuta automáticamente tu código a través de los cargadores, los empaqueta y actualiza la página, gracias a nuestro comando –watch.
Espero que esto te haya dado un vistazo al poder de usar el Webpack.
Contenidos