El valor del atributo use debe ser una matriz de nombres de Loader. El orden de ejecución de Loader es del último al
frente:
cada Loader puede pasar parámetros a través de la cadena de consulta, por ejemplo,
minimizar en css-loader? habilitar la compresión css, también puede implementarla a través de Object y especificar qué
cargador se usa para procesar archivos en el código fuente . Tomemos como ejemplo la carga del archivo css, modifique main.j en el ejemplo anterior de la siguiente manera:
require ('style-loader! Css-loader? Minimize! ./Main.css');
Dev Server iniciará el servidor HTTP para atender las solicitudes de la página web y, al mismo tiempo, ayudará a iniciar el
paquete web, y recibirá la señal de cambio de archivo enviada por Webpack, y actualizará automáticamente la página web a través del protocolo WebSocket para lograr una
vista previa en tiempo real. .
Cuando se inicia Webpack, utiliza la entrada en la configuración como punto de entrada para analizar recursivamente
los archivos de los que depende el intento. Webpack solo agregará la entrada en sí y los archivos dependientes a la lista de escucha. El archivo indx. Html está separado del sistema modular JavaScript, por lo que Webpack no conoce su existencia
Webpack admite la generación de mapas de origen, solo necesita traer un parámetro devtool source-map al iniciar. Reinicie DevServer, actualice la página y luego abra la herramienta de desarrollo del navegador Chrome, puede ver el código fuente depurable en la columna Fuentes
Después se inicia webpack, se iniciará a partir del módulo configurado en el baño intento , y de forma recursiva analizar todos los módulos que la entrada depende. Cada vez que
un módulo se encuentra, encontrará las reglas de conversión correspondientes de acuerdo con el cargador configurado. Después de la conversión el Módulo,
analizará los módulos dependientes del módulo actual del módulo. En el intento agrupados como una unidad, en el intento y
todos los módulos dependientes se asignan a un grupo que es Chunk. Finalmente, Webpack convierte todos los fragmentos en
archivos para su salida. Durante todo el proceso, Webpack ejecutará la lógica definida por Plugin en el momento adecuado.
A continuación, le damos un ejemplo práctico para llevarlo paso a paso para implementar un complemento.
El nombre del complemento es EndWebpackPlugin, que se utiliza para agregar algunas operaciones adicionales cuando Webpack está a punto de salir, por ejemplo, después de que Webpack compila y genera correctamente los archivos, ejecuta la operación de publicación y carga los archivos de salida en el servidor. Al mismo tiempo, el complemento también puede distinguir si la compilación de Webpack se ejecuta correctamente. El método para utilizar el complemento es el siguiente:
module.exports = {
plugins:[
// 在初始化 EndWebpackPlugin 时传入了两个参数，分别是在成功时的回调函数和失败时的回调函数；
new EndWebpackPlugin(() => {
// Webpack 构建成功，并且文件输出了后会执行到这里，在这里可以做发布文件操作
}, (err) => {
// Webpack 构建失败，err 是导致错误的原因
console.error(err);
})
]
}Para implementar el complemento, se necesitan dos eventos:
- done： Ocurre cuando Webpack está a punto de salir después de compilar y generar correctamente el archivo;
- fallido : ocurre cuando la compilación falla debido a una excepción y Webpack está a punto de salir;
La implementación del complemento es muy simple, el código completo es el siguiente:
class EndWebpackPlugin {
constructor(doneCallback, failCallback) {
// 存下在构造函数中传入的回调函数
this.doneCallback = doneCallback;
this.failCallback = failCallback;
}
apply(compiler) {
compiler.plugin('done', (stats) => {
// 在 done 事件中回调 doneCallback
this.doneCallback(stats);
});
compiler.plugin('failed', (err) => {
// 在 failed 事件中回调 failCallback
this.failCallback(err);
});
}
}
// 导出插件
module.exports = EndWebpackPlugin;