Recientemente, eche un vistazo al contenido relacionado con el paquete web, hable sobre cómo escribir el cargador y el complemento
01 Prefacio
Creo que todos también tienen cierto conocimiento de webpack. De hecho, leí mucho el libro de webpack y lo leí muchas veces. Cada vez que lo leo, hay algunos detalles que no noté antes. Creo que realmente puedo pensar en él como un libro de referencia. Es solo que la configuración es un poco para que no pueda verla, y mucho menos otras cosas.
Así que hoy hablaré sobre cómo escribir un cargador y un complemento, y qué hay entre ellos, pero no espere.
02 cargador
Loader es en realidad un convertidor que traduce el contenido que ingresa, esencialmente no hay cambio, al igual que el chino al inglés. De hecho, usamos mucho Loader sin saberlo, pero no le prestamos mucha atención. El cargador de uso común tiene las siguientes categorías:
Cargador común
Conversión de idiomas
babel-loader: Convertir ES6 a ES5ts-loader: Convertir TypeScript a JavaScriptsass-loader: Convertir scss / sass a cssless-loader: Convertir menos código a csscss-loader: Carga de CSS, importación de archivos, etc.
Clase de carga de archivos
raw-loader: Cargue el archivo de texto en el códigofile-loader: Envíe el archivo a una carpeta, use la ruta relativa para referirse al archivo de salidasource-map-loader: Cargue archivos SourceMap adicionales para facilitar la depuración del punto de interrupciónnode-loader: Cargue el archivo .node del módulo nativo Node.jsjson-loader: Cargar archivo json
Otro cargador
vue-loader: Cargar archivo .vueui-component-loader: Cargar biblioteca de componentes a pedidoi18n-loader: Cargar versión multilingüeignore-loader: Ignorar algunos archivos
Configuración del cargador
module.exports = {
module:{
rules:[
{
test:/\.scss/,
use:[
'style-loader',
{
'css-loader',
options:{
minimize:true
}
},
'sass-loader'
],
}
]
}
}
El código anterior significa el proceso de conversión del archivo .scss. La configuración de la prueba es convertir un cierto tipo de archivo. El uso es el cargador (convertidor) utilizado, que es una matriz, siguiendo el uso de derecha a izquierda. Primero sass-loader, luego css-loader, luego style-loader.
Cargar cargador local
Nuestro cargador predeterminado se descarga desde npm, pero ¿qué pasa si queremos usar nuestro propio cargador escrito localmente? Tenemos dicha configuración en el paquete web resolveLoader, lo que significa que donde usamos el cargador para cargar archivos, puede configurar múltiples lugares:
module.exports = {
resolveLoader:{
modules:['node_modules','yourPath']
}
}
Esto significa que podemos personalizar la ruta del cargador. El valor predeterminado es encontrarlo desde node_modules, pero si su cargador personalizado se coloca localmente, puede escribir su ruta en yourPath (ruta relativa). La regla de coincidencia es buscar de izquierda a derecha.
Cargador
Dicho esto, escribamos nosotros mismos un cargador simple. Aunque es un cargador sin sentido, también da a todos una impresión simple. Resulta que escribir un cargador es muy simple.
- Cree un nuevo directorio, como myLoader
- Ingrese el directorio para inicializar el archivo package.json, instale webpack
npm init -y,npm i -D webpack webpack-cli - Cree una nueva carpeta src en el directorio raíz y luego cree el archivo de entrada index.js-
src/index.js - Cree nuevos cargadores de carpetas en el directorio raíz y luego cree un nuevo myLoader.js personalizado——
loaders/myloader.js - Nuevo archivo de configuración del paquete web en el directorio raíz
webpack.config.js - Configure el comando de compilación del paquete webpack en package.json
package.json
{
"name": "myLoader",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
}
index.js
console.log('世界上最好的语言是PHP!')
myLoader.js
const loaderUtils = require('loader-utils');
module.exports = function (source) {
const options = loaderUtils.getOptions(this);
const result = source.replace('PHP', options.name);
return result;
}
webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/index.js",
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: path.resolve(__dirname, "./loaders/myLoader.js"),
options: {
name: "JavaScript",//这里就是你要替换的值
},
},
},
],
},
};
Ok, hasta ahora hemos escrito con éxito un cargador, ¡entonces probaremos si realmente funciona! npm run buildDespués de ejecutarse, generará una carpeta dist con un archivo main.js.
03 Plugin
En comparación con Loader, el mecanismo del complemento es en realidad más flexible, puede cambiar la salida durante la operación del paquete web. En pocas palabras, agrega un mosaico a la salida.
Complemento Común
extract-text-webpack-plugin: Ponga el código CSS en JS en un archivo separadowebpack-parallel-uglify-plugin: Compresión de código multiprocesohtml-webpack-plugin: Simplifique la creación de archivos HTMLdll-plugin: Mejora la velocidad de compilación del paquete webignore-plugin: Ignorar algunos archivos
Cómo funciona el complemento
Veamos primero cómo se escribe un complemento simple:
class myPlugin {
constructor(options){
}
apply(complier){
complier.plugin('compilation',function(compilation){
})
}
}
//导出
module.exports = myPlugin;
Flujo de trabajo :
- se inicia webpack, ejecuta myPlugin (opciones), inicializa el complemento y obtén la instancia
- Inicialice el objeto compilador, llame a myPlugin.apply (compilador) para pasar el objeto compilador al complemento
- La instancia del complemento obtiene un proveedor, escucha los eventos de difusión del paquete web a través del proveedor.plugin y opera el paquete web a través del objeto proveedor
Plugin
Como dice el dicho:talk is cheap,show me the code
Todavía siga la estructura del código anterior, cree una carpeta myPlugins en el directorio raíz, cree un archivo myPlugin.js dentro, personalizaremos un complemento:
class myPlugin {
constructor(doneCallback, failCallback) {
this.doneCallback = doneCallback;
this.failCallback = failCallback;
}
apply(compiler) {
compiler.hooks.done.tap('myPlugin', (stats) => {
this.doneCallback(stats);
});
compiler.hooks.failed.tap('myPlugin', (err) => {
this.failCallback(err);
});
}
}
module.exports = myPlugin;
Luego lo ponemos webpack.config.jsprimero en el archivo 引入插件, luego solo 配置插件.
Aún empaquete primero, encontrará que durante el proceso de empaquetado, webpack transmitirá el evento predeterminado, aquí escuché webpack done事件(éxito de la compilación de webpack, a punto de salir) y fail事件(falló la compilación de webpack, a punto de salir).
const myPlugin = require("./plugins/myPlugin");
module.exports = {
plugins: [
new myPlugin(
() => {
//throw new Error('Error!')
console.log("成功监听到结束事件，可以执行你想要的函数！");
},
(error) => {
console.log(error);
}
),
],
}
Después de ejecutarlo, podemos monitorearlo. Aquí intentaré ambos casos. Primero compila normalmente, luego lanza un error manualmente, el resultado es el siguiente:
04 Resumen
Hoy, hablaré sobre lo que parece ser simple. Por ejemplo, quiero echar un vistazo al código fuente de algunos cargadores y complementos clásicos. Si tengo confianza, también me gustaría echar un vistazo al código fuente de webpack.
Pero, de hecho, la diferencia entre el complemento y el cargador también a menudo se pregunta en las entrevistas, y también le preguntará cómo escribir el cargador y el complemento. Aunque es muy simple o incluso ingenuo, me siento bien.
Creo que todos deberían tener su propia comprensión después de leerlo, y tendrán sus propias ideas cuando se encuentren con este problema en el futuro. Todos conocerán el misterio después de practicarlo.
Artículo de referencia: Hablando de Webpack
