Diario de práctica del paquete web (2): cargador, para que el paquete web ya no se "raye"

Para los desarrolladores que están acostumbrados al scaffolding, escribir estilos css, importar estilos y luego ejecutar npm serve/dev (tome el scaffolding usado por vue como ejemplo), y luego ejecutar y depurar el código en el navegador es tan natural como beber agua. No hay necesidad de pensar en ello, ¿verdad? ¿Y si te dijera que no fue así? Probablemente te estés preguntando "¿qué? Siempre lo he usado de esa manera, y todos lo han usado de esa manera, ¿los andamios no siempre nos han permitido escribirlo de esta manera? "Siempre ha sido así, ¿verdad? Lo que voy a decir a continuación puede decepcionar a algunas personas. Como mencioné en el artículo anterior, el scaffolding de vue/react se basa en webpack, pero hay un hecho de que la mayoría de la gente no sabe que webpack puede procesar archivos con otras extensiones excepto archivos js/json. para los archivos css más simples. Sí, .jsx y .vue tampoco funcionan. De esta manera, nuevamente hay dudas, se puede usar andamiaje basado en webpack, por qué no se puede usar webpack. En este sentido, lo que quiero decir es que debido a que el cargador está configurado en el scaffolding, pueden manejar otro tipo de archivos basados ​​​​en webpack. Sí, cargador, deje que el paquete web ya no se "raye".

---

que es un cargador

Qué es un cargador, el funcionario ya dio la respuesta. **"Loader permite que webpack procese otros tipos de archivos y los convierta en módulos para que los use la aplicación y se agreguen al gráfico de dependencia".** Para decirlo sin rodeos, después de agregar el cargador, webpack puede procesar otros tipos de archivos, de esta manera, la escalabilidad de webpack es muy fuerte, que también es una de las manifestaciones de la jugabilidad de webapck. Siempre que haya un cargador relevante, se puede configurar en el paquete web y luego procesar los archivos relacionados.

**

Mensaje de error cuando falta el cargador

Aquí, use el archivo css para demostrar lo que sucede cuando el cargador correspondiente al css no está configurado para empaquetar.

1. Introduzca el archivo css en el archivo de entrada empaquetado (consulte esto si no conoce el archivo de entrada). He escrito algo de css arbitrariamente aquí y lo he importado usando esm.

import "./assets/index.css"
console.log("first")
复制代码

En este momento, el archivo de configuración de webapck

const path = require("path")
module.exports={
    entry:{
        index:"./src/index.js", //index只需要打包的文件，后面指打包的文件所在位置
    },
    output:{
        path:path.resolve(__dirname,"./build"), //生成的文件夹叫做build文件夹
         filename:"bundle.js"  //生成的打包之后的js文件名称
    }
}
复制代码

2. Después de usar el comando de empaquetado para empaquetarlo, encontrará que el mensaje de error es el siguiente: el significado es muy claro, es posible que necesite un cargador correcto para procesar este tipo de archivo, por lo que debemos agregar el cargador correspondiente para procesar al empaquetar el tipo de archivo css (Css se usa como ejemplo aquí), agreguemos el cargador para procesarlo

Configurar el cargador

1. Agregue lo siguiente a webpack.config.js

const path = require("path")
module.exports={
    entry:{
        main:"./src/main.js", //index只需要打包的文件，后面指打包的文件所在位置
    },
    output:{
        path:path.resolve(__dirname,"./build"), //生成的文件夹叫做build文件夹
        filename:"bundle.js"  //生成的打包之后的js文件名称
    },
    module:{
        rules:[
           //rules中的每一项都是需要配置并且进行处理的文件类型
        ]
    }
}

复制代码

2. Descarga el cargador css

3. Escriba la expresión regular css y el cargador correspondiente que se usará en la parte nueva. La opción de prueba representa qué archivo coincidir y use representa qué cargador usar para procesar este archivo. El uso que se muestra aquí es una forma simplificada de escribir , es decir, no es correcto Cuando el cargador tiene configuración adicional, utilice este método para importar el cargador

const path = require("path");
module.exports = {
  entry: {
    main: "./src/main.js", //index只需要打包的文件，后面指打包的文件所在位置
  },
  output: {
    path: path.resolve(__dirname, "./build"), //生成的文件夹叫做build文件夹
    filename: "bundle.js", //生成的打包之后的js文件名称
  },
  module: {
    rules: [
        {
            test: /\.css$/,
            use:['css-loader'],
         },
          /* 
          配置loader复杂的写法
           use: [
          {
            loader: 'css-loader',
            options: {
            	//这里写loader的配置对象
            },
          },
        ],*/
    ]
  },
};
复制代码

Ejecute el comando de empaquetado nuevamente y descubra que el empaquetado está completo sin errores

4. Luego, creamos un nuevo archivo index.html en la carpeta después de empaquetar y generar, e importamos el archivo justo después de empaquetar. Y agregue algo de contenido para verificar que el estilo recién ahora surta efecto

archivo html escrito

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    草新要蹦迪
    <script src="./bundle.js"></script>
</body>
</html>
复制代码

archivo css escrito

Aquí convertir la fuente a rojo

*{
    color: red;
}
复制代码

Abra el navegador y descubra que no hay ningún efecto y que no hay un estilo relevante en la consola. Esto se debe a que css-loader solo carga el archivo CSS y analiza el archivo CSS importado, pero no aplica el estilo css. Para aplicar el css, debe usar el cargador de estilos para agregar el contenido exportado del módulo como un estilo al DOM. 6. Agregue style-loader a la configuración del paquete web, preste atención para poner style-loader en css-loader, porque el orden de ejecución del cargador es de derecha a izquierda . Aquí hay que analizar primero el archivo css y luego aplicar el estilo css al nodo dom

const path = require("path");
module.exports = {
  entry: {
    main: "./src/main.js", //index只需要打包的文件，后面指打包的文件所在位置
  },
  output: {
    path: path.resolve(__dirname, "./build"), //生成的文件夹叫做build文件夹
    filename: "bundle.js", //生成的打包之后的js文件名称
  },
  module: {
    rules: [
        {
            test: /\.css$/,
            use:['style-loader','css-loader'],
         },
    ]
  },
};
复制代码

再次执行打包命令并且在浏览器上查看index.html，发现样式应用上去了，但是是加在style标签内，如何让css样式文件分离，后续章节会提到 这样，我们在编写代码的时候就可以像引入js文件一样引入css文件了！请记住，无论是脚手架还是webpack，如果没有配置对应的loader，那就是不能处理对应的文件，之所以脚手架对css文件开箱即用，是因为它们帮你配置好了，配置好，并不是与生俱来。

处理其他类型文件

这里再演示一下对图片资源的处理，webpack 5 中，可以使用内置的 Asset Modules对图片等静态资源处理，因此不需要下载对应的loader 1.首先得要有一张图片显示在网站上，因此需要修改打包入口文件，将图片以js的形式显示，在这将其设置为背景

import "./assets/index.css"
import imgSrc from "./assets/image/珠穆朗玛峰.jpg"
const divEl = document.createElement('div');
divEl.textContent = "Hello"
divEl.classList.add("content") //加上类名
document.body.appendChild(divEl)
// 再添加一个div，其样式使用loader来编写
const title = document.createElement("h2")
title.textContent="title"
document.body.appendChild(title)
title.classList.add("title")
const Img = document.createElement("img")
Img.src = imgSrc 
document.body.appendChild(Img)
const divBg = document.createElement("div")
document.body.appendChild(divBg)
divBg.classList.add("imgBg")
复制代码

2.对其进行配置，这时候需要注意type的设置问题，关于type，这有几点需要说明

aseet/resource:生成独立文件，打包之后的图片不会包含在js里面，js代码量减少，会再次请求两次网络请求去请求图片。

asset/inline:不会生成独立文件，打包之后的图片会在js里面，但是少了对图片的网络请求

综合优点： 直接设置asset文件，但是对于不同文件大小进行不同处理但是要对图片的大小进行划分，以达到更好的打包效果 这里主要是对图片资源的打包，其他资源也是大同小异，大家可以去webpack官网查看其他的资源类型，比如字体，svg资源等。

  {
  //在rules里面添加以下内容
                test: /\.(png|gif|jpe?g)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 60 * 1024 //对于超过这个尺寸的图片单独打包成一个文件
                        //还有其他属性大家可以自行去官网上查看
                    }
                },
                generator: { //这里设置生成之后的图片
                    // 使用占位符来对生成图片名字来重新设置
                    // name:以前图片的名称
                    // ext:以前资源的后缀名
                    // hash:生成的hash值,可选择截取几位
                    filename: "img/[name][hash:8][ext]" //可以添加前缀来生成新的文件夹
                }
            },
复制代码

3.查看打包之后的效果，可以发现webpack已经可以处理图片了！如果还需要对其他类型资源文件打包，可以下载其他类型资源相对应的loader，配置方式都是差不多。

总结

Inesperadamente, el paquete web solo puede empaquetar archivos js y json, y nunca se ha usado de fábrica para otros tipos de archivos. Cuando no se configura un cargador, se encuentra en un estado de "rayas", pero esta es una de las razones por las que webpack es tan poderoso Primero, podemos dejar que haga lo que haga por nosotros en lugar de lo que nos pide que hagamos, por lo que la escalabilidad de webpack mejora enormemente. Si desea construir un cargador jsx o vue, es solo cuestión de mantener en tus manos, ¿no se siente como si el andamio no estuviera tan lejos?