Uso básico del paquete web.
instalación del paquete web
Ejecute npm i webpack webpack-cli -D en la terminal del proyecto
Configurar el paquete web en el proyecto.
En el directorio raíz del proyecto, cree un archivo de configuración del paquete web llamado webpack.config.js e inicialice la siguiente configuración básica
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development'
}
En el nodo de script de package.json, agregue el script de desarrollo de la siguiente manera:
"scripts": {
"dev":"webpack"
},
Hay dos valores opcionales para el nodo de modo, que son:
①
El entorno de desarrollo
no comprimirá el código ni optimizará el rendimiento de los archivos generados por el paquete.
La velocidad de empaquetado es rápida y adecuada para su uso en la etapa de desarrollo
. ② El
entorno de producción
comprimirá los archivos generados por el paquete. Compresión de código y optimización del rendimiento.
La velocidad del paquete es muy lenta y solo es adecuada para su uso en la fase de lanzamiento del proyecto.
Convenciones predeterminadas en el paquete web
- El archivo de entrada de empaquetado predeterminado src ->index.js
- La ruta del archivo de salida predeterminada dist->main.js
Nota: Puede modificar la convención de empaquetado predeterminada en webpack.config.js
Entrada y salida empaquetadas personalizadas
En el archivo de configuración webpack.config.js, especifique la entrada del paquete a través del nodo de entrada . Especifique la exportación empaquetada a través del nodo de salida .
const path = require('path')//导入node.js中专门操作路径的模块
//使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development',
entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
output:{
path:path.join(__dirname,'./dist'),//输出文件的存放路径
filename:'bundle.js'//输出文件的名称
}
}
complemento de paquete web
. Los dos complementos de paquete web más utilizados son los siguientes:
① webpack-dev-server
es similar a la herramienta nodemon utilizada en la etapa node.js.
Cada vez que se modifica el código fuente, webpack empaquetará y construirá automáticamente el proyecto
② html -webpack-plugin
webpack El complemento HTML (similar a un motor de plantillas)
se puede utilizar para personalizar el contenido de la página index.html.
webpack-dev-server permite que webpack monitoree los cambios en el código fuente del proyecto para empaquetar y construir.
Instalar webpack-dev-servidor
Ejecute el siguiente comando para instalar este complemento en el proyecto:
npm i webpack-dev-server -D
Configurar el servidor webpack-dev
① Modifique el comando dev en package.json -> scripts de la siguiente manera:
"scripts": {
"dev": "webpack serve"
},
② Ejecute el comando npm run dev nuevamente para volver a empaquetar el proyecto. ③ Acceda a la dirección http://localhost:8080
en el navegador para verificar el efecto de empaquetado automático. El paquete.js generado es virtual y se genera en el directorio raíz del proyecto. La salida del paquete web se sirve desde / se puede mostrar a través de http://localhost:8080/bundle.js Es necesario modificar la referencia a bundle.js en el proyecto.
// 加载和引用内存中的bundle.js
<script src="/bundle.js"></script>
Instalar el complemento html-webpack
Ejecute el siguiente comando para instalar este complemento en el proyecto:
npm i html-webpack-plugin -D
La dirección http://localhost:8080 que hemos empaquetado no tiene una página index.html. Es un directorio raíz
. html-webpack-plugin es un complemento HTML en el paquete web. Puede personalizar el contenido del índice. página html a través de este complemento.
Requisito: copie la página de inicio index.html en el directorio src al directorio raíz del proyecto a través del complemento html-webpack-plugin.
Configurar el complemento html-webpack
//导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html', //指定源文件的存放地址
filename:'./index.html', //指定生成文件的存放路径
})
module.exports={
// 代表webpack运行的模式，可选值有两个 development 和 production
mode:'development',
plugins:[htmlPlugin], //通过plugins节点，使htmlPlugin插件生效
}
Resuelve la confusión html-webpack-plugin
① La página index.html copiada al directorio raíz del proyecto a través del complemento HTML también se coloca en la memoria.
② El complemento HTML inyecta automáticamente el archivo package.js empaquetado en la parte inferior de la página index.html generada
Propósito: Accedemos a http: // El directorio raíz de localhost:8080 tiene index.html, que se puede mostrar directamente.
devServernode
En el archivo de configuración webpack.config.js, puede configurar más complementos webpack-dev-server a través del nodo devServer. El código de muestra es el siguiente:
devServer:{
open:true,//初次打包完成后，自动打开浏览器
host:'127.0.0.1', //初次打包所使用的主机地址
port:80,//实时打包所使用的端口号
}
Nota: Si modifica el archivo de configuración webpack.config.js o modifica el archivo de configuración package.json, debe reiniciar el servidor de empaquetado en tiempo real; de lo contrario, el último archivo de configuración no tendrá efecto.
cargador en paquete web
En el proceso de desarrollo real, webpack solo puede empaquetar y procesar módulos que terminen con el sufijo .js de forma predeterminada. Otros módulos que no terminan con el sufijo .js no pueden ser procesados por el paquete web de forma predeterminada. Debe llamar al cargador para empaquetar normalmente , de lo contrario, se informará un error.
La función del cargador es ayudar al paquete web a empaquetar y procesar módulos de archivos específicos . Por ejemplo:
⚫ css-loader puede empaquetar y procesar archivos relacionados .css
⚫ less-loader puede empaquetar y procesar archivos .less relacionados
⚫ babel-loader puede empaquetar y procesar sintaxis JS avanzada que webpack no puede manejar
Empaquetar y procesar archivos css
① Ejecute el comando npm i style-loader css-loader -D para instalar el cargador que procesa archivos CSS.
② En el módulo -> matriz de reglas de webpack.config.js, agregue las reglas del cargador de la siguiente manera:
rules:[//文件后缀名的匹配规则
{
test:/\.css$/,use:['style-loader','css-loader']}
]
Entre ellos, prueba representa el tipo de archivo coincidente, uso representa el cargador correspondiente que se llamará.
Nota:
⚫ El orden de los cargadores especificados en la matriz de uso es fijo
⚫ El orden de llamada de múltiples cargadores es: llamar de atrás hacia adelante
Empaquetar y procesar menos archivos
① Ejecute el comando npm i less-loader less -D
② En el módulo -> matriz de reglas de webpack.config.js, agregue las reglas del cargador de la siguiente manera:
rules:[//文件后缀名的匹配规则
//loader调用顺序是从后往前
{
test:/\.less$/,use:['style-loader','css-loader','less-loader']},
]
Empaquetado y procesamiento de archivos relacionados con rutas URL en hojas 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:
La primera forma de escribir
rules:[//文件后缀名的匹配规则
{
test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'},
]
La segunda forma de escribir.
rules:[//文件后缀名的匹配规则
{
test:/\.jpg|png|gif$/, //匹配图片文件
use:{
loader:'url-loader',//通过loader属性指定要调用的loader
options:{
//同options属性指定参数项
limit:22229
}
}
}
]
Entre ellos, los siguientes son los parámetros del cargador: ⚫ el límite se usa para especificar el tamaño de la imagen, la unidad es byte (byte) ⚫ Solo las imágenes ≤ tamaño límite se convertirán a imágenes en formato base64
Sintaxis avanzada para empaquetar y procesar archivos js
webpack solo puede empaquetar y procesar una parte de la sintaxis avanzada de JavaScript. Para aquellas sintaxis js avanzadas que webpack no puede manejar, debe usar babel-loader para el procesamiento de empaquetado.
Instalar paquetes relacionados con babel-loader
Ejecute el siguiente comando para instalar el paquete de dependencia correspondiente:
npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D
Configurar el cargador de Babel
En el módulo -> matriz de reglas de webpack.config.js, agregue las reglas del cargador de la siguiente manera:
{
test:/\.js$/,
//exclude为排除项
// 表示babel-loader只需要处理开发者编写的js文件，不需要处理node_modules下的js文件
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
//参数项
//声明一个babel插件，此插件用来转化class中的高级语法
plugins:['@babel/plugin-proposal-class-properties'],
}
}
}
Empaquetar y publicar
Configurar el empaquetado y la publicación del paquete web
En el nodo scripts del archivo package.json, agregue el comando de compilación de la siguiente manera:
"scripts": {
"dev": "webpack serve", //开发环境中，运行dev命令
"build":"webpack --mode production" //项目发布时，运行build命令
},
–model es un parámetro utilizado para especificar el modo de ejecución del paquete web. Producción representa el entorno de producción y realizará la compresión del código y la optimización del rendimiento en los archivos generados por el empaquetado.
Nota: Los parámetros especificados mediante --model anularán la opción de modelo en webpack.config.js.
Genere archivos JavaScript en el directorio js
output:{
path:path.join(__dirname,'./dist'),//输出文件的存放路径
//明确告诉webpack把生成的bundle.js文件存放到dist目录下的js目录中
filename:'js/bundle.js'
},
Generar archivos de imagen en el directorio de imágenes.
{
test:/\.jpg|png|gif$/,
use:{
loader:'url-loader',//通过loader属性指定要调用的loader
options:{
//同options属性指定参数项
limit:22228,
outputPath:'image',
}
}
},
Limpiar automáticamente archivos antiguos en el directorio dist
Para limpiar automáticamente los archivos antiguos en el directorio dist cada vez que empaqueta y publica , puede instalar y configurar el complemento clean-webpack-plugin:
Ahora ejecute el siguiente comando en la terminal del proyecto
npm i clean-webpack-plugin -D
Configurar el complemento clean-webpack
//按需导入插件，得到插件的构造函数之后，创建插件的实例对象
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
plugins:[htmlPlugin,cleanPlugin], //通过plugins节点，挂载插件
Mapa fuente
Mapa fuente en el entorno de desarrollo del paquete web
En el entorno de desarrollo, webpack habilita la función de mapa fuente de forma predeterminada. Cuando ocurre un error mientras el programa se está ejecutando, puede solicitar directamente la ubicación de la línea de error en la consola y ubicar el código fuente específico.
Problema con el mapa fuente predeterminado
El mapa fuente generado de forma predeterminada en el entorno de desarrollo registra la ubicación del código generado. Esto provocará el problema de que el número de líneas en el error de tiempo de ejecución no coincide con el número de líneas en el código fuente.
Resuelva el problema del mapa fuente predeterminado
En un entorno de desarrollo, se recomienda agregar la siguiente configuración a webpack.config.js para garantizar que la cantidad de líneas de error en tiempo de ejecución sea consistente con la cantidad de líneas del código fuente :
eval-source-map solo se usa en desarrollo modo y no se recomienda.Usar en modo de producción.
module.exports={
mode:'development',
devtool:'eval-source-map',
}
Mapa fuente en el entorno de producción del paquete web
En un entorno de producción , si se omite la opción devtool , el mapa fuente no se incluirá en el archivo final generado . Esto evita que el código original quede expuesto a partes no autorizadas a través del mapa fuente.
En un entorno de producción, si solo desea ubicar el número específico de líneas donde se informó el error y no desea exponer el código fuente . En este momento, el valor de devtool se puede establecer en nosources-source-map .
En un entorno de producción, si desea mostrar el código fuente del error específico mientras localiza el número de líneas de error . En este momento, el valor de devtool se puede establecer en source-map. Después de usar esta opción: ¡Debe configurar su servidor para no permitir que usuarios comunes accedan al archivo de mapa fuente!
Mejores prácticas para mapas fuente
① En el entorno de desarrollo:
⚫ Se recomienda establecer el valor de devtool en eval-source-map
⚫ Beneficio: puede identificar la línea de error específica
② En el entorno de producción:
⚫ Se recomienda desactivar Source Map o establecer el valor de devtool to nosources-source-map
⚫ Beneficios: evita la filtración del código fuente y mejora la seguridad del sitio web