Cómo crear un archivo de configuración para webpack

1. Genere package.json en el proyecto: ingrese npm init en el directorio raíz del proyecto e ingrese la información correspondiente de acuerdo con las indicaciones. (También es posible no generar el archivo package.json, pero package.json es muy útil y se recomienda generarlos todos)

2. Instalar webpaack

a. Instale webpack globalmente: npm install webpack -g

b. Instale webpack en el proyecto y escriba webpack en devDependencies en package.json: ingrese al directorio raíz del proyecto y escriba npm install webpack ---save-dev. en la línea de comando.

3. Módulo de empaquetado

webpack & lt;output>.

se utiliza para especificar el archivo de empaquetado. y

se utiliza para especificar el archivo de empaquetado.

Por ejemplo, webpack app/index.js

build/build.js significa empaquetar index.js en la carpeta de la aplicación en build.js en la carpeta de compilación.

2. Elementos de configuración de uso común de los archivos de configuración de Webpack

1. Webpack tiene un archivo de configuración predeterminado webpack.config.js, que debe crearse manualmente y se encuentra en la raíz. directorio del proyecto. Puede configurar múltiples archivos de configuración para un proyecto para lograr diferentes funciones a través de diferentes archivos de configuración. Cómo lograr esto se explicará más adelante.

2. El archivo de configuración del paquete web expone un objeto en el siguiente formato:

módulo.exports = {

//Entrada de configuración

}

3. Las entradas de configuración comunes se introducirán más adelante

entrada: el archivo de entrada, cadena u objeto del paquete de software

Salida. p>

salida: configura el resultado del empaquetado, objeto

nombre de archivo: define el nombre del archivo de salida, cadena

ruta: define la ruta del archivo de salida, cadena

módulo: define la lógica de procesamiento del módulo, objeto

cargadores: define un grupo de cargadores, matriz

[

{

p>

prueba:Expresión regular para archivos coincidentes

loader/loaders:Cadena o matriz para procesar archivos coincidentes. Si usa solo un cargador de módulos, use loader: string; si usa múltiples cargadores de módulos, use loaders: array

incluir: cadena o matriz de carpetas para incluir

excluir: cadena o matriz , usado para excluir carpetas

}

]

resolver: afecta la resolución del módulo, objeto

extensiones: sufijo de reconocimiento automático de finalización, matriz

complementos: complemento de definición, matriz

4. Detalles de la entrada

(1) Cuando la entrada es un carácter Cuando la entrada es una cadena, el la cadena representa la ruta del módulo a empaquetar. Si solo hay un módulo a empaquetar, puede usar este formulario

(2) Cuando la entrada es un objeto

a. . es una matriz. Este método se puede utilizar cuando es necesario empaquetar varios módulos en un solo módulo. Si no hay dependencias entre estos módulos, no es necesario considerar el orden de los valores en la matriz; si hay dependencias, el módulo con mayor dependencia se coloca en último lugar.

Por ejemplo: entrada:["./app/one.js",".app/two.js"]

Es un objeto en forma de clave. -pares de valores, que pueden usarse cuando necesite empaquetarlos en varios módulos por separado, por ejemplo

entrada:{

módulo1:"./app/one.js; ",

módulo2: ["./app/two.js","./app/tres.js"]

}

Nota: Cuándo la entrada es un objeto en forma de par clave-valor, el nombre del paquete es el nombre de la clave y el nombre del archivo de salida no puede ser un valor fijo, porque el método de denominación de cada paquete no puede ser el mismo

5.Descripción detallada de la salida

(1) La salida es un objeto

(2) Output.filename: especifica el nombre del archivo de salida, una cadena. Al generar un solo archivo, salida.nombredearchivo es una cadena determinada

Por ejemplo

salida:{

nombre de archivo: "build.js"

}

Al generar varios archivos, salida.nombredearchivo no puede ser una cadena definida. Para darle a cada archivo un nombre único, utilizamos las siguientes variables

Reemplazar [nombre] con el nombre del fragmento correspondiente al nombre de la clave de entrada

Reemplazar [hash] con el valor Hash compilado

[chunkhash] se reemplaza con el valor hash del fragmento

Por ejemplo:

salida:{

ruta:/. build/',

fialname:'[name].js'

}

(3)output.path: especifica la ruta del archivo de salida, a Ruta relativa, una cadena

(4) Hay otros valores en la salida, que no se especifican aquí. Se pueden encontrar instrucciones más detalladas en el sitio web oficial de webpack