Archivo de configuración front-end y desarrollo móvil-webpack-webpack

paquete web

objetivos:

• Aprenda a usar los archivos de configuración del paquete web
• Especificará el modo de empaquetado y comprenderá la diferencia entre los dos métodos de empaque
• Especificará documentos de entrada y exportación
• Configurará devtool

La función de configuración cero proporcionada por webpack es muy débil y no se puede personalizar, por lo que también proporciona un archivo de configuración que nos permite personalizar la función (método recomendado).

Cree y use el archivo de configuración para configurar el archivo de empaquetado

objetivos:

• Comprender la configuración cero

• Conozca el archivo de configuración

• Puede configurar el método de empaque

• Comprender la diferencia entre los modos de desarrollo y producción.

Cero archivos de configuración y configuración

Cuando webpack está funcionando, encontrará un webpack.config.jsarchivo con el nombre predeterminado en el directorio raíz (si no lo encuentra, usará algunas configuraciones predeterminadas para admitir su función de configuración cero). Este archivo llamado webpack.config.js Es el archivo de configuración de En este archivo de configuración, podemos configurar de manera flexible según sea necesario para hacer que el paquete general sea más flexible.

webpack.config.js

Este archivo de configuración es en sí mismo un archivo js que se ajusta a la especificación del módulo node.js, y su función es establecer las condiciones y restricciones que utilizará webpack al empaquetar el proyecto.

El formato básico es:

module.exports = {
    
    
	配置项名1： 配置项值1，
	配置项名2： 配置项值2
}

El nombre y el valor correspondiente de cada elemento de configuración tiene un significado específico y no se puede cambiar a voluntad.

Configuración básica-modo de empaquetado

El elemento de modo en webpack.config.js se utiliza para establecer el método de empaquetado, si no se establece, se utilizará por defecto production. Sitio web oficial de referencia

webpack proporciona dos valores de atributo para el elemento de modo:

• desarrollo: modo de desarrollo. El código generado (dist / main.js) en este momento todavía es legible y de gran tamaño, por lo que el código empaquetado es adecuado para el desarrollo.

• producción: Modo de producción. Automáticamente habilitará algunas medidas de optimización dentro del paquete web, como compresión, ofuscación, encriptación ... En resumen, hace que el código sea ilegible e irreversible.

Ver la operación real:

Cree un webpack.config.js en el directorio raíz y escriba lo siguiente:

/**
 1. 要放在项目的根目录下。
 2. 在npx webpack打包时，会自动去找这个文件，并运行其中的
    代码。如果找不到，则进入零配置模式 ---- 采用一些默认配置。
*/
console.log('打包文件....')
module.exports = {
    
    
  mode: "development"
}

Luego, ejecute el comando de empaquetado nuevamente npx webpack, encontrará que console.log('打包文件....')se ejecutará y, al mismo tiempo, se creará un nuevo main.js nuevamente en el directorio dist.

Configurar la entrada de embalaje

Hay un concepto muy importante: archivo de entrada (qué archivo webpack debe comenzar a analizar y empaquetar)

En paquete web:

• La entrada predeterminada es: ./src/index.js

• La exportación predeterminada es: ./dist/main.js.

Cuando no haya escrito ningún archivo de configuración (o no haya modificado la configuración de entrada en el archivo de configuración), webpack encontrará directamente index.js en src y colocará el código empaquetado en dist / main.js.

¿Qué es un archivo de entrada?

Dile a webpack qué archivo comenzar a analizar y empaquetar.

Cómo personalizar el archivo de entrada

La ubicación predeterminada del archivo de entrada en el paquete web es: src / index.js

Si está en desarrollo real, espero:

• Este archivo de entrada no es index.js, sino main.js
• El archivo js general no se coloca en el directorio src, sino en src / js.

Solución: reconfigure la entrada según sea necesario.

Paso 1: ajuste la estructura del directorio para simular los requisitos anteriores. Ajuste la estructura del directorio de la siguiente manera:

|-package.json
|-index.html
|-src/
|-src/js
|-------main.js
|-------tool.js

Cree un nuevo directorio js y cambie index.js a main.js

Paso 2: modificar elementos de configuración

Modificar los elementos de configuración webpack.config.js de entryelementos

module.exports = {
  mode: 'development', // 打包方式
  entry:'./src/js/main.js' // 入口文件
}

Paso 3: reempaque y pruebe.

Configurar la exportación de paquetes

¿Qué es un documento de exportación?

Después de empaquetar los archivos de origen, ¿dónde deben colocarse? Este archivo es el archivo de exportación, el valor predeterminado es dist / main.js

Cómo configurar la exportación de paquetes

El valor predeterminado de webpack: el valor predeterminado dist / main.js

Requisitos: coloque el archivo de exportación en bundle.js en el directorio de compilación

Solución: establezca el elemento de salida en webpackage.js.

// 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    
    
  mode: "production",
  entry: './src/js/main.js', // 入口文件
  output: {
    
    
     "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
     "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
  }
}

Descripción:

• El nombre de archivo en la salida se usa para especificar el nombre del archivo empaquetado.
• La ruta en la salida se usa para especificar la ruta empaquetada. Nota: Debe ser una ruta absoluta . Por lo tanto, aquí se hace referencia a la combinación y __dirname en el módulo de ruta para generar una ruta absoluta.
• Si la ruta en ruta no existe, se creará automáticamente .

Configurar devtool

Importar

El archivo de destino generado por el paquete webpack es el archivo de destino. Si el archivo de destino es incorrecto, queremos depurarlo y averiguar qué archivo es el error.

Ejemplo

Para resolver este problema, necesitamos aprender los elementos de configuración de devtool.

devtool

Esta opción controla si generar y cómo generar el mapa de origen. El mapa fuente se utiliza para mapear la relación entre el código fuente antes del empaque y el archivo objeto después del empaque , lo cual es conveniente para depurar (cuando el código tiene un error, podemos averiguar en qué código fuente está el error).

module.exports ={
    
    
   devtool: 'source-map',
   mode: 'development'
}

devtool tiene más de 20 valores para elegir, cada opción tiene un significado diferente, por ejemplo:

• "Source-map": genera la relación de mapeo en un archivo de mapa separado .

• "Inline-source-map": guarda la relación de mapeo en el archivo del paquete

Sugerir:

• Se puede configurar en la fase de producción: mapa-fuente-módulo-barato

• Se puede configurar durante la fase de desarrollo: cheap-module-eval-source-map

resumen

• El nombre predeterminado del archivo de configuración del paquete web eswebpack.config.js

• Aprender el paquete web es principalmente para aprender el uso de webpack.config.js .

• Personalizar: entrada, salida, modo, devtool

Si hay alguna deficiencia, por favor avise,
continúe, ¡continúe actualizando!
¡Progresen juntos!