Webpack es una herramienta de carga/empaquetado de recursos front-end. Realiza un análisis estático según las dependencias de los módulos y luego genera los recursos estáticos correspondientes a partir de estos módulos siguiendo las reglas especificadas.

Este capítulo está probado con Webpack 3.0.

En la figura podemos ver que Webpack puede convertir múltiples recursos estáticos (js, css, less) en un solo archivo estático, reduciendo así las solicitudes de la página.

A continuación, presentamos brevemente la instalación y el uso de Webpack.

Instalar Webpack

Antes de instalar Webpack, tu entorno local debe ser compatible.node.js。

Debido a que la instalación con npm es lenta, este tutorial utiliza el espejo de Taobao y su comando cnpm. Para la introducción sobre instalación y uso, consulte:Usar el espejo NPM de Taobao。

Instalar webpack con cnpm:

Crear un proyecto

A continuación, creamos un directorio app:

Añade el archivo ejemplo1.js en el directorio app, el código es el siguiente:

Añade el archivo index.html en el directorio app, el código es el siguiente:

A continuación, usamos el comando webpack para empaquetar:

Al ejecutar el comando anterior se compilará el archivo ejemplo1.js y se generará el archivo bundle.js. Si tiene éxito, la información de salida es la siguiente:

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./ejemplo1.js 29 bytes {0} [built]

Abre index.html en el navegador, el resultado se muestra a continuación:

Crear un segundo archivo JS

A continuación, creamos otro archivo js, ejemplo2.js, como se muestra a continuación:

Actualiza el archivo ejemplo1.js, el código es el siguiente:

A continuación, usamos el comando webpack para empaquetar:

Accede en el navegador, el resultado se muestra a continuación:

webpack realiza un análisis estático según las dependencias de los módulos; estos archivos (módulos) se incluirán en el archivo bundle.js. Webpack asigna a cada módulo un id único y, a través de este id, indexa y accede a los módulos. Al iniciar la página, primero se ejecuta el código de ejemplo1.js; los demás módulos se ejecutan cuando se ejecuta require.

LOADER

Webpack por sí solo solo puede procesar módulos de JavaScript. Si se necesitan procesar otros tipos de archivos, se debe usar loader para convertirlos.

Entonces, si necesitamos añadir archivos CSS en la aplicación, debemos usar css-loader y style-loader, que hacen dos cosas diferentes: css-loader recorre el archivo CSS, luego encuentra las expresiones url() y las procesa; style-loader inserta el código CSS original en una etiqueta style de la página.

A continuación, usamos el siguiente comando para instalar css-loader y style-loader (la instalación global requiere el parámetro -g).

Después de ejecutar el comando anterior, se generará el directorio node_modules en el directorio actual; ese es el directorio de instalación de css-loader y style-loader.

A continuación, crea un archivo style.css, el código es el siguiente:

Modifica el archivo ejemplo1.js, el código es el siguiente:

A continuación, usamos el comando webpack para empaquetar:

Accede en el navegador, el resultado se muestra a continuación:

Al hacer require de archivos CSS, siempre hay que escribir el prefijo loader.!style-loader!css-loader!Por supuesto, podemos enlazar automáticamente el loader necesario según el tipo de módulo (extensión). En ejemplo1.js, la línearequire("!style-loader!css-loader!./style.css")se modifica arequire("./style.css") ：

Luego ejecuta:

Accede en el navegador, el resultado se muestra a continuación:

Obviamente, estas dos formas de usar loader tienen el mismo efecto.

Archivo de configuración

Podemos colocar algunas opciones de compilación en el archivo de configuración para gestionarlas de manera unificada:

Crea el archivo webpack.config.js, como se muestra a continuación:

A continuación, solo necesitamos ejecutar el comando webpack para generar el archivo bundle.js:

Después de ejecutar el comando webpack, se cargará de forma predeterminada el archivo webpack.config.js del directorio actual.

Complementos

Los complementos se especifican en la opción plugins de la configuración de webpack y se utilizan para realizar trabajos que los loaders no pueden completar.

Webpack trae algunos complementos incorporados; también puedes instalar algunos complementos mediante cnpm.

El uso de complementos integrados requiere instalación mediante el siguiente comando:

Por ejemplo, podemos instalar el complemento integrado BannerPlugin, que se utiliza para generar información de comentarios en el encabezado del archivo.

Modifica webpack.config.js, el código es el siguiente:

Luego ejecuta:

webpack

Abre bundle.js y verás que en el encabezado del archivo aparece la información de comentario que especificamos.

Entorno de desarrollo

Cuando el proyecto va creciendo, el tiempo de compilación de webpack se alarga. Se pueden usar parámetros para que la salida de la compilación muestre progreso y colores.

Si no quieres recompilar cada vez que modificas un módulo, puedes activar el modo de vigilancia. Una vez activado el modo de vigilancia, los módulos que no han cambiado se almacenan en caché en la memoria después de la compilación y no se vuelven a compilar cada vez, por lo que la velocidad general del modo de vigilancia es muy rápida.

Por supuesto, podemos usar el servicio de desarrollo webpack-dev-server. Así podremos iniciar un servidor web de recursos estáticos express a través de localhost:8080, y ejecutará webpack automáticamente en modo de vigilancia. Abriendo http://localhost:8080/ o http://localhost:8080/webpack-dev-server/ en el navegador se pueden ver las páginas del proyecto y la salida de recursos compilados. Además, mediante un servicio socket.io se monitorean en tiempo real los cambios y se actualiza la página automáticamente.

Abre http://localhost:8080/ en el navegador, el resultado se muestra a continuación: