Cómo usar webpack para empaquetar aplicaciones web

Con el desarrollo de la tecnología front-end, aparecen cada vez más términos nuevos ante nuestros ojos. Angularjs, react, gulp, webpack, es6, babel... La aparición de las nuevas tecnologías, ¡entendamoslas y aprendamos a utilizarlas! Hoy voy a cubrir cómo usar Webpack para empaquetar aplicaciones web.

Normalmente, la página que escribimos tiene la siguiente estructura:

index.html

css

style.css

js

index.js

.............

De esta manera podemos hacer referencia a él directamente en html css y js para completar una aplicación web. El uso de webpack es similar, excepto que webpack compila y empaqueta imágenes, css y js en un solo archivo, por lo que solo necesitamos hacer referencia a un archivo.

1. Primero debemos instalar el entorno del nodo. De lo contrario, instálelo usted mismo

2. En el directorio del proyecto, escriba npm init para inicializar un proyecto de nodo, ingrese el nombre del proyecto y otra información y luego genere un archivo package.json.

3. Instale webpack en el directorio del proyecto

npm install --save-dev webpack

4. Necesitamos un archivo webpack.config.js para grabar. información de configuración del paquete web. La configuración es aproximadamente la siguiente:

var webpack = require('webpack');

var path = require('path'); = ruta .resolve(__dirname, 'build');

var config = {

//archivo de entrada

entrada: {

índice: './src/js/index.js'

},

extensiones: ['', '.js', '.json', '. css', '.less'],

Salida: {

ruta: buildPath, // Ruta del archivo compilado

nombre de archivo: 'app.js'

},

módulo: {

///Cargadores

cargadores: [

//uso del archivo .css style-loader y css-loader para procesamiento

{ test:/\.css$/, loader: 'style-loader!css-loader' },

{ test:/ \.less$/,

loader: 'style-loader!css-loader!less-loader'

},