Mecanismo de cargador de paquetes web e implementación de simulación

Loader es uno de los núcleos de webpack. Se utiliza para convertir diferentes tipos de archivos en módulos reconocibles por paquetes web.

usar

 module: {
        loaders: [
			{
			    test: /\.css$/,
			    use: ['style-loader']
			},
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
        ]
    }

La diferencia entre cargador y complemento

El cargador se utiliza para convertir el código fuente del módulo, y el propósito del complemento es resolver otras cosas que el cargador no puede lograr.

El complemento se puede llamar en cualquier etapa, puede procesar aún más la salida de Loader en Loader, ejecutar devoluciones de llamada registradas previamente y usar el objeto de compilación para hacer algunas cosas de nivel inferior.

Llame a varios cargadores en una cadena

Al llamar a varios cargadores en una cadena, recuerde que se ejecutarán en orden inverso. Dependiendo del formato de la matriz, se ejecuta de derecha a izquierda o de abajo hacia arriba.

• El último cargador se denomina el más antiguo y se pasará el contenido del recurso original.
• El primer cargador se llama al final y el valor esperado es el JavaScript saliente y el mapa de origen (opcional).
• Cuando se ejecuta el cargador intermedio, se transferirá el resultado del cargador anterior.

La carga de recursos del paquete web es similar a la canalización de trabajo, se pueden usar varios cargadores y el resultado de salida debe ser un código js estándar.

Ejemplo:

//webpack.config.js
{
  test: /\.js/,
  use: [
    'bar-loader',
    'foo-loader'
  ]
}

foo-loader se pasa al recurso original, bar-loader recibirá la salida de foo-loader y devolverá el módulo convertido final (código js) y un mapa fuente (opcional)

Implementación del cargador de simulación

Simulación uno

El cargador procesará el archivo .txt y reemplazará directamente el [nombre] en cualquier instancia con el nombre establecido en la opción del cargador. Luego regrese al módulo JavaScript que contiene el texto exportado predeterminado.

//src/loader.js

import { getOptions } from 'loader-utils';

export default function loader(source) {
  const options = getOptions(this);

  source = source.replace(/\[name\]/g, options.name);

  return `export default ${ JSON.stringify(source) }`;
};

usar:

 module: {
      rules: [{
        test: /\.txt$/,
        use: {
          loader: path.resolve(__dirname, '../src/loader.js'),
          options: {
            name: 'Alice'
          }
        }
      }]
    }

Simulación dos

Simule la función de un cargador de estilo simple.

//将css插入到head标签内部
module.exports = function (source) {
    let script = (`
      let style = document.createElement("style");
      style.innerText = ${JSON.stringify(source)};
      document.head.appendChild(style);
   `);
    return script;
}

usar

resolveLoader: {
   modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
    test: /\.css$/,
    use: ['style-loader']
},

Consulte https://www.webpackjs.com/contribute/writing-a-loader/

Este artículo enlaza https://blog.csdn.net/qq_39903567/article/details/115334778