Conocimiento completo del paquete web de Vue2 y el uso de M (la versión más completa y completa del conocimiento relacionado con el paquete web)

Language 2023-08-23 03:21:55 views: null

Conocimiento relacionado con WebPack de Vue

1. El uso básico del paquete web.

1. Concepto

webpack es una solución específica para la ingeniería de proyectos front-end.

2. Funciones principales

Proporciona soporte amigable para el desarrollo modular de front-end, así como funciones poderosas como compresión y ofuscación de código, procesamiento de compatibilidad de JavaScript en el lado del navegador y optimización del rendimiento. (Es decir, los programadores pueden escribir código de nivel superior y el paquete web convertirá automáticamente el código de alto nivel en código de bajo nivel)

3. Ventajas

Permita que los programadores se concentren en la realización de funciones específicas, lo que mejora la eficiencia del desarrollo front-end y la mantenibilidad del proyecto.
Nota: En la actualidad, los proyectos front-end como Vue y React se desarrollan básicamente en base a webpack.

Dos, aplicación de paquete web

1. Realice la función de cambio de color entrelazado

1.1 Crear un nuevo directorio en blanco del proyecto

(1) En el directorio actual, abra la terminal y ejecute el comando npm init -y para inicializar el archivo de configuración de administración de paquetes package.json

npm init -y

Después de ejecutarse correctamente, el archivo package.json aparecerá en esta carpeta
imagen.png

1.2 Crear un nuevo directorio de código fuente src

(1) Después de crear la carpeta src, como se muestra en la figura siguiente
imagen.png
(2) Haga clic para ingresar a la carpeta src y luego cree dos archivos de script, index.html e index.js,
como se muestra en la figura siguiente
imagen.png

1.3 Inicializar la estructura de la página

(1) Abra el archivo index.html con VScode, ¡ingrese! número, y luego presione Enter, el siguiente código aparecerá automáticamente

<!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>
    
</body>
</html>

(2) Ingrese debajo de la etiqueta del cuerpo

ul>li{这是第$个li}*9

(3) Presione Entrar nuevamente y el código relevante se generará automáticamente en la etiqueta del cuerpo.
El código de estructura completo es el siguiente

<!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>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
</body>
</html>

1.4 Instalar jQuery

Ejecute el comando npm install jquery -S para instalar jQuery

npm i jquery -S

Después de que la instalación sea exitosa, como se muestra a continuación
imagen.png

1.5 Importar jQuery a través de la modularización de ES6

(1) Importar comandos en el archivo index.js

// 1.使用ES6导入语法，导入jQuery
import $ from 'jquery'

Nota: No se puede usar directamente en la página html, debe empaquetarse con el paquete web antes de poder usarse.
(2) Realice el efecto de cambio de color entrelazado de la lista

// 2.定义jQuery的入口函数
$(function () {
    
    
    // 3.实现奇偶行变色
    // 奇数行为红色
    $('li:odd').css('background-color', 'red')
    // 偶数行为粉红色
    $('li:even').css('background-color', 'pink')
})

1.6 Instalar el módulo del paquete web

(1) Ejecute el siguiente comando en la terminal

npm install [email protected] [email protected] -D

o

npm install [email protected] [email protected] --save-dev

Nota: -D es la abreviatura de –save-dev
(2) Si se informa el error de instalación,
la solución

首先删除该项目中下载好的node_modules
再删除该项目中package-lock.json文件
以管理员权限执行下面的命令：
再清除npm缓存 npm cache clean --force
最后npm install
再重新执行npm install [email protected] [email protected] -D
应该就没问题了

1.7 Configurar el paquete web en el proyecto

(1) En el directorio raíz del proyecto, cree un archivo de configuración del paquete web llamado webpack.config.js e inicialice la configuración básica de la siguiente manera.
Al mismo tiempo, representa el modo de ejecución del paquete web, hay dos valores opcionales: desarrollo y producción.
Utilice el desarrollo durante el desarrollo, el tiempo de embalaje es rápido, pero el paquete comprimido es grande.
Utilice la producción durante la producción, el tiempo de embalaje es lento, pero el paquete comprimido es pequeño.

// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    
    
    mode: 'development'
}

(2) En el nodo scripts de package.json, agregue el script de desarrollo de la siguiente manera

"scripts": {
    
    
    "dev": "webpack"
  }

Nota: los scripts bajo el nodo script se pueden ejecutar a través de npm run, como npm run dev

1.8 Ejecute el comando para iniciar el paquete web para empaquetar y compilar el proyecto

(1) Ejecutar el comando

npm run dev

El resultado se muestra a continuación y la ejecución es exitosa.
imagen.png

1.9 Entrada y salida de embalajes personalizados

(1) Convenciones predeterminadas en webpack En
las versiones webpack 4.x y 5.x, existen las siguientes convenciones predeterminadas. El
archivo de entrada del paquete predeterminado es el archivo index.js en el directorio src.
La ruta del archivo de salida predeterminada está en dist directorio.main.js
Nota: Puede modificar el contrato predeterminado de empaquetado en webpack.config.js
(2) Puede especificar la entrada y salida del empaquetado
En el archivo de configuración webpack.config.js, especifique la entrada del empaquetado a través del nodo de entrada y especifique el empaquetado a través de la salida del nodo de salida.

const path = require('path')

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 自定义打包入口文件的路径
    entry: path.join(__dirname,'./src/index1.js'),
    // 自定义生成的文件的存放路径
    output: {
    
    
        // 存放到目录 
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: 'mian1.js'
    }
}

1.10 Importar el archivo js empaquetado en el código

<!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>
    <script src="../dist/main1.js"></script>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
</body>
</html>

El resultado es el siguiente
imagen.png

2. Complementos en el paquete web

2.1 El papel del complemento webpack

Al instalar y configurar complementos de terceros, se pueden ampliar las capacidades de webpack, lo que hace que webpack sea más cómodo de usar.

2.2 complemento webpack-dev-server

(1) Introducción
Siempre que se modifica el código fuente, webpack empaquetará y construirá automáticamente el proyecto.
(2) comando

npm install [email protected] -D

Nota: Apague VSCode u otro software que abra esta carpeta durante la instalación.
(3) Configure webpack-dev-server
para modificar el comando de desarrollo en los scripts en package.json

"scripts": {
    
    
    "dev": "webpack serve"
  },

(4) Reempaquetar el proyecto

npm run dev

(5) Visite la dirección http://localhost:8080 en el navegador para verificar el efecto de empaquetado automático.
(6) Si se informa un error, la solución es la siguiente:
reinstale el módulo dependiente de webpack-cli

npm install webpack-cli --save-dev

repetición

npm run dev

Nota: webpack-dev-server iniciará un servidor http empaquetado en tiempo real y colocará los archivos empaquetados en la memoria, por lo que si abre la página localmente, las cosas relevantes no cambiarán, solo a través de http://localhost: 8080/src para ver los cambios en tiempo real, y el código importado debe modificarse para
imagen.png

2.3 complemento html-webpack

(1) Introduzca
el complemento HTML en el paquete web (similar a un complemento del motor de plantillas)
(2) Comando

npm install [email protected] -D

(3) Uso relacionado

// 1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

// 2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    
    
    template: './src/index.html', // 指定原文件的存放路径
    filename: './index.html', //指定生成的文件的存放路径
})

// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 3.通过plugins节点，使htmlPlugin插件生效
    // 插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin],
}

(4) Ejecutar comando

npm run dev

Al acceder a través de http://localhost:8080, la página aparecerá directamente.
(5) Nota
Cuando se utiliza el complemento html-webpack-plugin, la página index.html copiada al directorio raíz del proyecto a través del complemento HTML también se coloca en la memoria.
El complemento HTML inyecta automáticamente el archivo index.js empaquetado en la página index.html generada.
Por lo tanto, no es necesario importarlo en el código, se representará automáticamente.

2.4 nodo devServer

(1) Introducción
En el archivo de configuración webpack.config.js, puede configurar más complementos webpack-dev-server a través del nodo devServer
(2) Códigos relacionados

devServer: {
    
    
        // 首次打包成功后，自动打开浏览器
        open: true,
        // 在http协议中，如果端口号是80，则可以被省略
        port: 92,
        // 指定运行的主机地址
        host: '127.0.0.1'
}

(3) La ubicación en el archivo de configuración webpack.config.js

module.exports = {
    
    
    mode: 'development',
    devServer: {
    
    
        // 首次打包成功后，自动打开浏览器
        open: true,
        // 在http协议中，如果端口号是80，则可以被省略
        port: 92,
        // 指定运行的主机地址
        host: '127.0.0.1'
    }
}

resultado
imagen.png

3. El cargador en el paquete web (cargador)

3.1 descripción general del cargador

En el proceso de desarrollo real, webpack solo puede empaquetar y procesar módulos que terminen con el sufijo .js de forma predeterminada. Otros módulos que no terminan con el sufijo .js no pueden ser procesados ​​por webpack de forma predeterminada y es necesario llamar al cargador para empaquetar normalmente; de ​​lo contrario, se informará un error.

3.2 Función

La función del cargador es ayudar al paquete web a empaquetar y procesar módulos de archivos específicos.
css-loader puede empaquetar y procesar archivos relacionados con css.
less-loader puede empaquetar y procesar archivos menos relacionados.
babel-loader puede empaquetar y procesar sintaxis JS avanzada que el paquete web no puede manejar

3.3 Empaquetado y procesamiento de archivos CSS

(1) Instale el comando del cargador para procesar archivos css

npm i [email protected] [email protected] -D

(2) En la matriz de reglas del módulo de webpack.config.js, agregue reglas del cargador.

module: {
    
    
   rules: [
            // 定义了不同模块对应的loader
            // 文件名后缀名的匹配规则
            {
    
    test: /\.css$/, use:['style-loader','css-loader']}
   ]
}

Entre ellos, prueba indica el tipo de archivo coincidente y uso indica la posición del cargador correspondiente
(3) en el archivo de configuración webpack.config.js que se llamará.

module.exports = {
    
    
    mode: 'development',
    module: {
    
    
        rules: [
            // 定义了不同模块对应的loader
            // 文件名后缀名的匹配规则
            {
    
    test: /\.css$/, use:['style-loader','css-loader']}
        ]
    }
}

(4) Código en index.js

import './css/index.css'

(5) El código correspondiente al archivo css.

html,
body,
ul {
    
    
  margin: 0;
  padding: 0;
}
html li,
body li,
ul li {
    
    
  line-height: 30px;
  padding-left: 20px;
  font-size: 12px;
}

resultado
imagen.png

3.4 Proceso de procesamiento CSS

(1) Cuando webpack descubre que un archivo no se puede procesar, buscará el archivo de configuración webpack.config.js para ver si el cargador correspondiente está configurado en la matriz module.rules.
(2) webpack transfiere el archivo Index.css a css-loader para su procesamiento
(3) cuando css-loader termina de procesarse, transfiere el resultado del procesamiento a style-loader
(4) cuando style-loader termina de procesarse Después de eso, no hay siguiente cargador, por lo que el resultado del procesamiento se transfiere al paquete web
(5). El paquete web fusiona el resultado del procesamiento del cargador de estilos en /dist/index.js y finalmente genera un archivo empaquetado.

3.5 Empaquetar y procesar menos archivos

(1) Instalar comandos para procesar menos archivos

npm i [email protected] [email protected] -D

(2) En la matriz de reglas del módulo de webpack.config.js, agregue reglas del cargador.

 module: {
    
    
        rules: [
            // 定义了不同模块对应的loader
            // 处理 .less文件的loader
            {
    
    test:/\.less$/, use:['style-loader','css-loader','less-loader']}
        ]
}

(3) La ubicación en el archivo de configuración webpack.config.js

module.exports = {
    
    
    mode: 'development',
    module: {
    
    
        rules: [
            // 定义了不同模块对应的loader
            // 处理 .less文件的loader
            {
    
    test:/\.less$/, use:['style-loader','css-loader','less-loader']}
        ]
    }
}

(4) Código en index.js

import './css/index.less'

(5) El código correspondiente al archivo less.

html,
body,
ul {
    
    
    margin: 0;
    padding: 0;
    li{
    
    
        line-height: 30px;
        padding-left: 20px;
        font-size: 12px;
    }
}

resultado
imagen.png

3.6 Empaquetar y procesar archivos relacionados con la ruta URL

(1) Instalar comandos que procesan archivos relacionados con rutas URL

npm i [email protected] [email protected] -D

(2) En la matriz de reglas del módulo de webpack.config.js, agregue reglas del cargador.

module: {
    
    
        rules: [
            // 定义了不同模块对应的loader
            // 处理 图片的loader
            // 如果 需要调用的loader只有一个，则只传递一个字符串也行，如果有多个loader,则必须指定数组
            {
    
    test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'},
        ]
}

Nota:
el límite se utiliza para especificar el tamaño de la imagen y la unidad es byte (byte).
Solo las imágenes menores o iguales al tamaño límite se convertirán a imágenes en formato base64.
Se recomienda convertir imágenes pequeñas a base64 para una carga rápida sin enviar múltiples solicitudes.
(3) La ubicación en el archivo de configuración webpack.config.js

module.exports = {
    
    
    mode: 'development',
    module: {
    
    
        rules: [
            // 定义了不同模块对应的loader
            // 处理 图片的loader
            // 如果 需要调用的loader只有一个，则只传递一个字符串也行，如果有多个loader,则必须指定数组
            {
    
    test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'},
        ]
    }
}

(4) Código en index.js

// 导入图片，得到图片文件
import logo from './images/logo.jpg'
// 给img标签的src动态赋值
$('.box').attr('src',logo)

(5) Código correspondiente

<img src="" alt="" class="box">

resultado
imagen.png

3.7 El proceso de estilos de procesamiento de paquetes web.

Estilo de importación (en el paquete web, todo es un módulo, que se puede importar y usar a través de la sintaxis de importación de ES6).
Si en un módulo, el miembro recibido mediante el uso de no está definido, no es necesario recibirlo.

3.8 Empaquetado y procesamiento de sintaxis avanzada en js

(1) Introducción
El paquete web solo puede empaquetar y procesar cierta sintaxis JavaScript avanzada. Para algunas sintaxis js avanzadas que el paquete web no puede manejar, debe usar babel-loader para empaquetar y procesar.
(2) comando

npm i [email protected] @babel/[email protected] @babel/[email protected] -D

(3) En la matriz de reglas del módulo de webpack.config.js, agregue reglas del cargador.

module: {
    
    
        rules: [
            // 使用babel-loader处理高级js语法
            // 在配置babel-loader的时候，只需要把自己的代码进行转换即可，要排除node_modules目录中的JS文件
            // 因为第三方包中的JS兼容性，不需要关心
            {
    
    
                test: /\.js$/,
                use: 'babel-loader', exclude: /node_modules/
            },
        ]
    }

(4) La ubicación en el archivo de configuración webpack.config.js

module.exports = {
    
    
    mode: 'development',
    module: {
    
    
        rules: [
            // 使用babel-loader处理高级js语法
            // 在配置babel-loader的时候，只需要把自己的代码进行转换即可，要排除node_modules目录中的JS文件
            // 因为第三方包中的JS兼容性，不需要关心
            {
    
    
                test: /\.js$/,
                use: 'babel-loader', exclude: /node_modules/
            },
        ]
    }
}

(5) En el directorio raíz del proyecto, cree un archivo de configuración llamado babel.config,js

module.exports = {
    
    
    plugins: [['@babel/plugin-proposal-decorators', {
    
    legacy: true}]]
}

(6) Escriba el código de prueba en el archivo index.js

// 定义装饰器函数
function info(target) {
    
    
    target.info = 'Person info'
}

// 定义一个普通的类
@info
class Person{
    
    }

console.log(Person.info)

resultado
imagen.png

4. Lanzamiento del paquete webpack

4.1 Configurar el comando de compilación

(1) En el nodo scripts del archivo package.json, el comando de compilación es el siguiente

"scripts": {
    
    
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },

--mode es un elemento de parámetro que se utiliza para especificar el modo de funcionamiento del paquete web. producción representa el entorno de producción, y la compresión del código y la optimización del rendimiento se realizarán en los archivos empaquetados y generados.
Nota: El elemento de parámetro especificado por –mode anulará la opción de modo en webpack.config.js. --mode tiene prioridad sobre la opción modo.

4.2 Optimice la ubicación de almacenamiento de imágenes y archivos js

(1) Modifique la ruta de generación del archivo js en el archivo webpack.config.js

const path = require('path')

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // entry: '指定要处理哪个文件'
    entry: path.join(__dirname, './src/index.js'),
    // 指定生成的文件要存放到哪里
    output: {
    
    
        // 存放的目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件路径
        filename: 'js/index.js'
    },
}

El resultado después de una generación exitosa
imagen.png
(2) Modifique el elemento de configuración del cargador de URL en webpack.config.js y agregue la opción outputPath para especificar la ruta de salida del archivo de imagen.
Especifique claramente almacenar los archivos de imagen generados al empaquetar en la carpeta de imágenes en el directorio dist

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    module: {
    
    
        rules: [
            // 处理 图片的loader
            {
    
    
                test: /\.jpg|png|gif$/,
                // 配置url-loader的时候，多个参数之间，使用&符号进行分隔
                use: 'url-loader?limit=470&outputPath=images',
            },
        ]
    }
}

resultado
imagen.png

4.3 Configurar y utilizar el complemento clean-webpack-plugin

(1) Comando de instalación

npm install --save-dev clean-webpack-plugin

(2) Agregar código en webpack.config.js

const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 通过plugins节点，使htmlPlugin插件生效
    // 插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin, new CleanWebpackPlugin()],
}

5 、 Mapa fuente

5.1 Introducción

Source Map es un archivo de información que almacena información de ubicación. Es decir, el archivo del mapa fuente almacena el código comprimido y ofuscado, correspondiente a la posición antes de la conversión. Si algo sale mal, la herramienta de depuración mostrará directamente el código original en lugar del código convertido, lo que puede facilitar enormemente la depuración posterior.

5.2 En el entorno de desarrollo, ubique con precisión la línea de error específica (sugerencia)

Agregue el siguiente código en webpack.config.js

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 此选项生成的Source Map能够保证“运行时报错的行数” 与 “源代码的行数”保持一致
    devtool: 'eval-source-map',
}

5.3 En el entorno de producción, cuando ocurre un error, se ubica el número de líneas y también se expone el código fuente (no recomendado)

Agregue el siguiente código en webpack.config.js

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 此选项生成的Source Map能够保证“运行时报错的行数” 与 “源代码的行数”保持一致
    devtool: 'source-map',
}

5.4 En el entorno de producción, cuando ocurre un error, solo se ubica el número de línea y no se expone el código fuente (recomendado)

Agregue el siguiente código en webpack.config.js

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 此选项生成的Source Map能够保证“运行时报错的行数” 与 “源代码的行数”保持一致
    devtool: 'nosources-source-map',
}

Es conveniente para los usuarios depurar y mejorar la seguridad del sitio web.

5.5 Atención

Al publicar el proyecto, se recomienda desactivar la opción devtool, entonces el archivo final generado no contiene el mapa fuente. Esto evita que el código original quede expuesto a otros en forma de mapa fuente.

6. Expansión

6.1 Reemplazar el directorio src con @

(1) El código es el siguiente.

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    resolve: {
    
    
        alias: {
    
    
            // 用@符号表示src这一层目录
            '@': path.join(__dirname, './src/')
        }
    }
}

(2)
Los ejemplos de aplicaciones relacionados son los siguientes:

import '@/css/index.css'

Supongo que te gusta

Origin blog.csdn.net/qq_46106857/article/details/128937400
Recomendado
Clasificación
Diario
Más
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)

Code World

© 2018 codetd.com