proceso de configuración de webpack5 aprendiendo uno

configuración del paquete web5

1. Inicialice el proceso de configuración del proyecto.

1. Inicialice el paquete web npm init -y para generar un archivo package.json inicializado
   1. El nombre no puede ser paquete web, de lo contrario entrará en conflicto con las dependencias de instalación.
   2. main se refiere a la dirección de entrada del archivo de inicio empaquetado
   3. Otros valores predeterminados están bien

2. La instalación de webpack depende de npm i webpack webpack-cli -D install webpack y webpack-cli dos dependencias

3. Empaque el archivo dist npx webpack ./src/main.js --mode=development

​ paquete web npx ./src/main.js --mode=producción

​

2. Cree el archivo de configuración webpack.config.js

• elementos de configuración

• 1. Entrada de entrada: ''

• 2. Salida de salida: {}

• 3. Módulo cargador: []

• 4. Complementos: complementos: []

• 5. Modo: modo

  Nota: El comando de empaquetado en este momento se convierte en npx webpack (porque el elemento de datos ya está configurado)

3. Manejar recursos de estilo

1. Procesamiento de recursos CSS

• Descargue la línea de comando del paquete npm i css-loader style-loader -D (descargue algunos con varios cargadores)

2. Manejar menos recursos

• Descargar el paquete npm install less less-loader --save-dev

Tenga en cuenta que el uso puede cargar varios cargadores y el cargador solo puede cargar uno

3. Procesar recursos atrevidos

• Descargar el paquete npm install sass-loader sass webpack --save-dev

4 Procesamiento de recursos de imágenes

• Al procesar recursos de imágenes, webpack5 viene con la función de empaquetar imágenes en directorios de imágenes, por lo que debe escribir elementos de configuración directamente.

  Método de optimización: establezca el tamaño de la imagen convertida a base64 para que se pueda optimizar la cantidad de solicitudes, pero la desventaja es que el volumen del paquete aumentará

5. Modifique el directorio de salida y borre el último registro de empaquetado.

• Propósito: facilitar la administración del código, dividir la estructura del directorio en bloques y separar js y css

6. Manejar recursos de íconos de fuentes y otros archivos estáticos

7. Manejar recursos js

1.Eslint

• Cree un nuevo archivo.eslintrc.* El nombre del archivo no puede ser incorrecto

2. Babel maneja la compatibilidad de la versión js

• instalación npm -D babel-loader @babel/core @babel/preset-env

8. Procesar recursos html (importar js automáticamente)

npm install --save-dev html-webpack-plugin

9. Cree un servidor de desarrollo: empaquete y vea los datos automáticamente

• 1.npm en servidor webpack-dev-D

Después de esta configuración, el comando de inicio se convierte en npx webpack server y el entorno de desarrollo no generará archivos dist en la memoria.

10. Construir modo de producción

Durante el proceso de compilación, la configuración será la que se encuentre debajo del directorio de forma predeterminada, lo cual es consistente con el principio anterior.

• Porque este comando es más engorroso.

• La instrucción del entorno operativo es npx webpack save --config ./config/webpack.dev.js

• El comando del entorno de empaquetado es npx webpack save --config ./config/webpack.prod.js

• conducir a demasiado engorroso

  • Por lo tanto, configure el comando especificado para configurar npm start /npm run dev/npm run build en package.json

• [Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-DxsyJbG7-1661247051759) (C:\Users\11433\AppData\Roaming\Typora\ imágenes-de-usuario-de-typora\ 1661245154113.png)]

11. Extraiga el estilo CSS (evite el fenómeno de la pantalla blanca – procese datos)

• instalación npm --save-dev mini-css-extract-plugin

• Introducir const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // Extraer el complemento de estilo CSS

• Debido a que el complemento MiniCssExtractPlugin se utiliza para extraer el estilo, todos los cargadores de estilo se cambian a MiniCssExtractPlugin.loader

• De lo contrario, la extracción del estilo no tendrá éxito.

• configuración

Manejo de compatibilidad de estilos CSS

• 1.npm i postcss-loader postcss postcss-preset-env -D

1247051760)]

Manejo de compatibilidad de estilos CSS

• 1.npm i postcss-loader postcss postcss-preset-env -D
• [Transferencia de imagen de enlace externo...(img-iLBifARO-1661247051761)]