Plugin y cargador de webpack-add de escritura a mano

本文中，“webpackSimple”指项目，而“localWebpack”或者“demo-start'”均指手写的webpack工具
En la sección anterior hice un paquete web simple que, aunque resolvió el problema de la introducción modular, actualmente solo admite la introducción de módulos js. En esta sección, voy a agregar un cargador y un complemento a esta versión de bajo perfil del paquete web, para que pueda importar css y otros archivos y realizar otras operaciones. Más cerca de casa, empieza abajo

En primer lugar, primero escribimos dos versiones simplificadas de loader-style-loader y less-loader
Primero instale el complemento less en el proyecto "webpackSimple" (para convertir menos archivos en css), y luego creamos un nuevo cargador de carpetas en el directorio raíz, en el que Cree dos archivos style-loader.js y less-loader.js

// less-loader.js
let less = require("less")
function loader(source) {
  let css = "";
  less.render(source, function(err, c) {  // 这是less插件提供的解析方法
    css = c.css;
  })
  css = css.replace(/\n/g, "\\n");  // 这里\n是换行，但转换成字符串后，不能正确解析
  return css;
}
module.exports = loader;

//style-loader.js
function loader(source) {
  let style = `
    let style = document.createElement('style');
    style.innerHTML = ${JSON.stringify(source)}; // 将css文件的内容字符串化
    document.head.appendChild(style)
  `;
  return style;
}
module.exports = loader;

Arriba, creamos dos cargadores. webpack.config.js agrega manejo de menos archivos

 module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          path.resolve(__dirname, "loader", "style-loader"), //这里，使用自己创建的loader
          path.resolve(__dirname, "loader", "less-loader")
        ]
      }
    ]
  }

A continuación, debemos agregar el procesamiento del cargador en el que el paquete web escrito a mano, procesando el cargador, de hecho, la forma de analizar el archivo es diferente de los js puros anteriores. js solo obtiene el contenido del archivo. El cargador debe procesar primero otros archivos. Entonces, modifique el método getSource en Compiler.js aquí

getSource(modulePath) {
    // 拿到匹配规则
    let rules = this.config.module.rules;
    // 拿到文件内容
    let content = fs.readFileSync(modulePath, "utf8");
    // 分别处理不同规则
    rules.forEach((rule, index) => {
      let { test, use } = rule;
      let len = use.length - 1;
      if (test.test(modulePath)) {
        // 如果匹配到了，也就是说这个模块需要用loader来转换
        function normalLoader() {
          let loader = require(use[len--]); // 因为loader规则是从下至上，从右至左的
          // 递归调用loader,实现转化功能
          // loader获取对应的loader函数
          content = loader(content);
          if (len >= 0) {
            normalLoader(); // 如果还有loader，继续执行
          }
        }
        normalLoader();
      }
    });
    return content;
  }

Bueno, a continuación, probamos los resultados. Primero, cree un nuevo archivo index.less en el proyecto webpackSimple e impórtelo en index.js. Luego cree index.html en el directorio dist e importe bundle.js, el directorio de archivos es el siguiente:

menu.png

//index.less
body {
  background: red;
}

Luego ejecútelo npx demo-start
en el proyecto , abra index.html en el navegador

image.png

Como puede ver, el archivo less se analizó e importó correctamente.

Agregar complemento

Primero instale "tapable" en nuestro complemento "webpack" (para un uso fácil de las funciones de enlace). Aquí solo usamos SyncHook como ejemplo, primero introduzca SyncHook en Compiler.js
在编译文件时，先拿到webpack.config.js文件，看其中是否有plugins字段，有的话，就挨个执行，插件的内部其实就是注册一个个钩子函数

//Compiler.js
let { SyncHook } = require("tapable");
class Compiler {
  constructor(config) {
    ...
    this.hooks = {
      entryOption: new SyncHook(),
      compile: new SyncHook(),
      afterCompile: new SyncHook(),
      afterPlugins: new SyncHook(),
      run: new SyncHook(),
      emit: new SyncHook(),
      done: new SyncHook()
    };
    // 如果传递了plugins参数
    let plugins = this.config.plugins;
    if (Array.isArray(plugins)) {
      plugins.forEach(plugin => {
        plugin.apply(this);  //插件内部都由apply方法
      });
    }
    // 插件装载完成
    this.hooks.afterPlugins.call();  //调用钩子
  }
  ...

Código de proyecto:

//webpack.config.js

class P {   // 模拟一个plugin
  apply(complier) {
    complier.hooks.emit.tap("emit", function() { // 注册钩子“emit”
      console.log("emit");
    });
  }
}
module.exports = {
  entry: './src/index.js',
  ...
  plugins: [new P()]
}

2 me gusta

diario

Autor: Lee
Mature Enlace: https: //www.jianshu.com/p/02e3f743659b
Fuente: Los libros de Jane
tienen derechos de autor del autor. Para reimpresiones comerciales, comuníquese con el autor para obtener autorización. Para reimpresiones no comerciales, indique la fuente.

Plugin y cargador de webpack-add de escritura a mano

Supongo que te gusta