webpack es una popular herramienta de construcción de proyectos front-end (herramienta de empaquetado) que puede resolver el dilema al que se enfrenta el desarrollo web.
webpack proporciona un soporte modular amigable, así como compresión y confusión de código, manejo de problemas de compatibilidad con JS, optimización del rendimiento y otras funciones poderosas. De este modo, permita que los programadores se centren en la realización de funciones, mejoren la eficiencia del desarrollo y la mantenibilidad del proyecto.
1. Inicialización del archivo Package.json
①: Cree un directorio en blanco para el proyecto y ejecute el comando npm init -y para inicializar el archivo de configuración de administración de paquetes package.json
②: Cree un nuevo directorio de código fuente src
③: Cree un nuevo src -> index.html Inicio
④ : Inicializa la estructura básica de la página de inicio
⑤: Ejecuta el comando npm install jquery -S para instalar JQuery
⑥: a través de la forma de modularización, para lograr el efecto de cambio de color entrelazado en la lista
2: inicialización de Webpack-cli
[La versión 5 del paquete web no es compatible con la versión 4 cli y reportará un error]
①: Ejecute el comando npm install webpack webpack-cli -D para instalar paquetes relacionados con el paquete web
②: Cree un paquete web llamado webpack.config.js en el proyecto directorio Archivo de configuración
③: En el archivo de configuración del paquete web, inicialice el siguiente
módulo de configuración básica. exportaciones = { modo: "desarrollo" // el modo se usa para especificar el modo de compilación } ④: Agregue dev bajo el nodo de scripts en el paquete.json archivo de configuración El script es el siguiente: "scripts": { "dev": "webpack" // El script debajo del nodo de script se puede ejecutar a través de npm run } ⑤: Ejecute el comando npm run dev en la terminal para iniciar el paquete web para embalaje del proyecto
[Cuando se completa el empaquetado, el archivo de empaquetado se genera automáticamente en dist, y main.js se genera automáticamente en dist, y el archivo de entrada: index.js en src]
3: modificar el archivo de entrada del paquete y el archivo de salida
El archivo de entrada empaquetado es src -> index.js y el
archivo de salida empaquetado es dist -> main.js
Si desea modificar la entrada y salida del paquete, puede agregar la siguiente información de configuración en webpack.config.js:
const path = require ('path');
module.exports = { entry: path.join (__ dirname, '. / src / index.js'), // La ruta de salida del archivo de entrada del paquete : { ruta: ruta. join (__dirname, '. / dist'), // La ruta de almacenamiento del archivo de salida nombre de archivo : 'bundle.js' // El nombre del archivo de salida } }
4: empaquetado automático webpack-dev-server
webpack empaqueta automáticamente [se modifica automáticamente después de la modificación] la memoria genera un archivo bundle.js
① Ejecute el comando npm install webpack-dev-server -D para instalar herramientas que admitan el empaquetado automático de proyectos
② Modifique el comando dev en package.json -> script de la siguiente manera:
③ "script": { "dev": "webpack-dev -server ”// El script bajo el nodo de script se puede ejecutar mediante npm run } ④ Modificar la ruta de referencia del script de script en src -> index.html a /bundle.js ⑤ Visite http: // localhost: 8080 en el browser Nota: webpack-dev-server iniciará un servidor http empaquetado en tiempo real El archivo de salida generado por webpack-dev-server se coloca en el directorio raíz del proyecto por defecto, que es virtual e invisible.
5: Configure html-webpack-plugin para generar una página de vista previa
①: Ejecute el comando npm install html-webpack-plugin -D para instalar el complemento que genera la página de vista previa
②: Modifique el área de encabezado del archivo webpack.config.js, agregue la siguiente información de configuración
// Importar el complemento que genera la página de vista previa y obtiene un constructor
const HtmlWebpackPlugin = require ('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin ((// Cree un objeto de instancia de la
plantilla de complemento : './ src / index.html ', // Especifique el archivo de plantilla que se utilizará
nombre de archivo:' index.html '// Especifique el nombre del archivo generado. El archivo existe en la memoria y no se mostrará en el directorio
})
③: Modifique el objeto de configuración expuesto al exterior en el archivo webapck.config.js y agregue los siguientes nodos de configuración:
Module.exports = { plugins: [htmlPlugin] // La matriz de complementos es una lista de algunos complementos que se utilizarán durante embalaje webpack }
6: Configuración automática de los parámetros relacionados con el embalaje.
// Configuración en package.json
// --open --host configure IP address --port configure port
"scripts": { "dev": "webpack-dev-sever --open" // abre automáticamente el navegador }
"Scripts": { "dev": "webpack-dev-server --host 127.0.0.1 --port 8888" // abre automáticamente 127.0.0.1:8888 }
2.3 Cargadores en paquete web
1： 通过 loader 打包非 JS 模块
En el desarrollo real, webpack solo puede empaquetar y procesar módulos que terminen con el sufijo js de forma predeterminada, y otros módulos que terminen con nombres de sufijo que no sean js
no se pueden procesar de forma predeterminada . Webpack necesita llamar al cargador para empaquetar normalmente, de lo contrario, se producirá un error informó
Loader loader puede ayudar a webpack a empaquetar y procesar módulos de archivos específicos, tales como:
empaquetado y procesamiento de menos cargador. Archivos relacionados sin empaquetar y procesar archivos relacionados con
sass-loader empaquetar y procesar archivos relacionados con .scss
url-loader y procesar archivos css relacionados con la ruta de la URL
1: css-loader empaqueta y procesa archivos css
①: Ejecute el comando npm i style-loader css-loader -D para instalar el cargador que procesa el archivo css.
②: En el módulo -> matriz de reglas de webpack.config.js, agregue las reglas del cargador de la siguiente manera:
// Todos los módulos de archivos de terceros Reglas coincidentes:
módulo: { reglas: [ {prueba: /\.css$/, use: ['style-loader', 'css-loader']} // La expresión regular en el frente, y el cargador usado en la parte trasera ] }
③: Importa el archivo import './ css / 01.css' en index.js [index.html no necesita importar archivos]
2: paquetes con menos cargadores y procesa menos archivos
①: Ejecute el comando npm i less-loader less -D [less-loader confía en menos]
②: agregue al módulo -> matriz de reglas en webpack.config.js, y agregue las reglas de la siguiente manera
③: módulo: { reglas: [ {prueba: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']} ] } ④: Importar el archivo import './ css / 01. less'
3: sass-loader empaqueta y procesa archivos scss
En webpack.config.js, use: is sass-loader
①: Ejecute el comando npm i sass-loader node-sass -D
②: En el módulo -> matriz de reglas de webpack.config.js, agregue las reglas del cargador de la siguiente manera
③: módulo: { reglas: [ {prueba: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']} ] }
4: Configure postCSS para agregar automáticamente un prefijo compatible con CSS
①: Ejecute el comando npm i postcss-loader autoprefixer -D para instalar
②: Cree el archivo de configuración postcss postcss.config.js en el directorio raíz del proyecto e inicialice la configuración
const autoprefixer = require ('autoprefixer') // Importe el plug-in con prefijo automático
module.exports = { plugins: [autoprefixer] } ③: En el módulo -> matriz de reglas de webpack.config.js, modifique las reglas del cargador css de la siguiente manera: módulo: { reglas: [ {prueba: / \ .css $ /, use: ['style-loader', 'css-loader', 'postcss-loader']} ] }
5: url-loader empaqueta imágenes y archivos de fuentes en la hoja de estilo
①: Ejecute el comando npm i url-loader file-loader -D
②: En el módulo -> matriz de reglas de webpack.config.js, agregue las reglas del cargador de la siguiente manera:
módulo: { reglas: [ {prueba: / \. jpg | png | gif | bmp | ttf | eot | svg | woff | woff2 $ /, use: 'url-loader? limit = 126976} ] }
¿Después? Es el elemento de parámetro del cargador, el
límite se usa para especificar el tamaño de la imagen, la unidad es byte (byte), solo las imágenes más pequeñas que el tamaño límite se convertirán a imágenes base 64, de lo contrario no se convertirán a base64
6: procesamiento de paquetes de sintaxis avanzada en archivos JS
{Por ejemplo, si algunos objetos se definen en index.js, se informará un error}
①: Instale el paquete relacionado con el convertidor de babel npm i babel-loader @ babel / core @ babel / runtime -D
②: Instale el paquete relacionado con el complemento de sintaxis de babel: npm i @ babel / preset-env @ babel / plugin- transform-runtime @ babel / plugin-proposition-class-properties -D
③: En el directorio raíz del proyecto, cree el archivo de configuración de babel babel.config.js e inicialice la configuración básica de la siguiente manera:
module.exports = { presets: [' @ babel / preset-env '], complementos: [' @ babel / plugin-transform-runtime ',' @ babel / complemento-propuesta-clase-propiedades '] } ④: En el módulo -> matriz de reglas del paquete web, config .js, agregue la regla del cargador de la siguiente manera: // exclude es un elemento en cola, lo que significa que babel-loader no necesita procesar archivos js en node_modules [System js] {test: '/ \. js $ /, use: 'babel-loader', excluir: / node_modules /}