Según el video en la estación B, siempre se informa un error, así que probé una variedad de métodos en CSDN, pero no sé qué método es efectivo. Superpuse una variedad de métodos y los anoté.
Al hacer el ejemplo de salto de línea y cambio de color, no cambiará de color. Debido a que el paquete jQuery pertenece a la sintaxis es6 , no todos los navegadores pueden admitir la sintaxis es6 . Por lo tanto, use webpack para manejarlo.
Empaquetado: se pueden empaquetar varios archivos Javascript en un solo archivo para reducir la presión del servidor y descargar el ancho de banda.
Conversión: convierta el lenguaje extendido en JavaScript ordinario , para que el navegador pueda funcionar sin problemas.
Optimización: a medida que el front-end se vuelve cada vez más complejo, también se producirán problemas de rendimiento, y WebPack también ha comenzado a asumir la responsabilidad de optimizar y mejorar el rendimiento.
( 1 ) Instalar
npm install -g webpack // instalar webpack globalmente
(Tenga en cuenta que si lo instala así, se le pedirá que instale webpack-cli ; este es un mensaje para 4.x. Si no desea instalar webpack-cli , debe reinstalar la versión inferior de webpack )
( 2 )
Una vez completada la instalación global, también necesitamos instalar un directorio de proyecto. Antes de instalar con npm , primero debemos inicializarlo.
El propósito principal de la inicialización es generar un archivo package.json (este es un archivo de descripción estándar de npm , que contiene información rica,
Incluyendo los módulos dependientes del proyecto actual, tareas de script personalizadas, etc., si aún no conoce este archivo, puede consultar el conocimiento relevante de node ).
npm init // Inicialice el proyecto, puede presionar Enter hasta el final para generar el archivo package.json
npm install --save-dev [email protected] // El oficial no admite la instalación global, bloqueará la versión, así que instálela en el directorio del proyecto
( 3) Una vez completada la instalación, puede ver el número de versión webpack –v
(4) Cree un nuevo archivo de configuración webpack.config.js después de completar la instalación .
Decidió continuar usando el archivo de configuración para empaquetar el archivo de configuración. Así que arregla el código.
La configuración final exitosa:
(5) Dentro de Webpack.config.js
const path= require('path')
//使用法Node.js中的导出语，向外导出一个webpack的配置对象
module.export = {
//入口文件
entry:path.join(__dirname,'src/index.js'),
//出口路径
output:{
//输出的文件名
filename:'bundle.js',
//输出路径
path: path.join(__dirname,'dist')
},
//代表webpack运行的模式，可选值有两个development和production,当开发阶段是development，当快上线时，改成production.
mode:'development'
}
(6) Paquete interno.json
{
"name": "change-rows-color",
"version": "1.0.0",
"description": "npm-install-package",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"keywords": [],
"author": "",
"private": "true",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.1"
},
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
"descripción" : "npm-instalación-paquete" ,
Esta oración originalmente estaba vacía, pero se agregó.
"privado" : "verdadero" ,
está agregado
"Dependencias de desarrollo" : {
"paquete web" : "^5.74.0" ,
"webpack-cli" : "^4.10.0"
}
Se genera instalando webpack.
(7) También cambie index.html aquí
<script src="../dist/main.js"></script>Después de la configuración, actualice el archivo de configuración en la línea de comando de la carpeta actual
(8) npm webpack--config webpack.config.js
(9) Cree una nueva carpeta dist .
El directorio de la carpeta se crea de la siguiente manera:
(10) Luego ejecute npm run build para ejecutar webpack
El resultado exitoso es el siguiente
Finalmente, haga clic en el html y ejecútelo en el navegador para encontrar que los saltos de línea cambian de color.
El código en mian.js aún no se ha comprimido, jquery en sí lo ha comprimido, siempre que haya comentarios y retornos de carro, significa que el paquete web no está comprimido, cómo usar el paquete web para comprimir
Solo necesita convertir las opciones de configuración en webpack de desarrollo a producción
Desarrollo: la velocidad de empaque es rápida y el volumen es grande, pero la búsqueda de la velocidad es el tiempo de desarrollo
Producción: la velocidad de empaque es lenta, pero el volumen de empaque es pequeño y se usa cuando se conecta en línea
Desarrollo:
Producción:
Descubrí que todavía hay un problema con la instalación, el valor predeterminado es comprimir
Falta una coma, en la línea establecida por modo
Desarrollo:
Producción:
