Hoy traté de escribir sobre webpack, no sé si participaré cuando escriba. Por favor corríjame si hay un error. Gracias por leer amigos.
1. Reconocer webpack
1.1 Definición: Herramienta de construcción automatizada front-end, desarrollada en base a Node.js.
1.2 Focalización del problema: resuelva los problemas de fusionar, empaquetar, comprimir y confundir la introducción de recursos estáticos.
1.3 ¿Cuáles son los problemas si no utiliza herramientas de construcción automatizadas?
① La página web se carga lentamente.
② Para lidiar con muchas dependencias entre paquetes.
2. Instalación de Webpack
2.1 Método de instalación:
① Instalación global: npm install webpack -g
② Instalación para las dependencias del proyecto: Ejecute npm install webpack --save-dev en el directorio raíz del proyecto.
Nota: webpack4 requiere que webpack-cli esté instalado al mismo tiempo.
2.2 Crear un directorio de proyecto: la carpeta node-modules se genera cuando se instala el paquete web, por lo que no es necesario agregarlo manualmente. Los que deben agregarse manualmente se han marcado con líneas rojas
Una vez completada la instalación, utilice npx webpack para empaquetar. Luego, el archivo comprimido main.js se generará en el archivo dist del directorio del proyecto.
2.3 Ejemplo de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack学习</title>
<!-- 引入刚才打包生成的main.js文件 -->
<script src="../dist/main.js"></script>
</head>
<body>
</body>
</html>
console.log('这次能行')
Resultado de la impresión:
3. Configure manualmente el paquete web
3.1 Cree un nuevo archivo de configuración: /src/webpack.config.js (Nota: elimine la carpeta dist creada manualmente antes de esto).
3.2 Contenido de la configuración:
let path = require('path ')
module.exports = {
mode: 'development', // production or development
entry: './src/index.js', // 入口文件
output: {
filename:'main.js', // 打包之后的文件名称
path: path.join(__dirname, 'dist')
}
}
3.3 Estructura de directorio:
3.4 Ejemplo de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack学习</title>
<!-- 引入刚才打包生成的main.js文件 -->
<script src="../dist/main.js"> </script>
</head>
<body>
</body>
</html>
console.log('这次也可以打出来')
3.5 Imprimir resultados
4. Configure manualmente el servicio integrado del paquete web
Cuando se inicia la página, no se puede iniciar a través de loaclhost. webpack tiene un servicio de desarrollo integrado a través de express. Podemos instalarlo y configurar el contenido relacionado, podemos acceder a la página a través de localhost. Su ventaja es que en realidad no empaqueta, sino que genera un paquete en la memoria.
4.1 Instalación: npm install webpack-dev-server -D (Nota: la D mayúscula indica una dependencia durante el desarrollo)
4.2 Configuración de package.json:
4.3 Configuración de webpack.config.js:
ejecutar: npm ejecutar dev
5. Configuración manual html Plantilla:
5.1 Instalación: npm install html-webpack-plugin -D
5.2 Configuración de webpack.config.js:
6. Configurar manualmente css
6.1 Instalar loader
npm install css-loader style-loader less-loader
6.2 Configuración de webpack.config.js:
module: {
rules: [ // 规则
// loader执行顺序：默认从右向左，从下向上
{
test: /\.less$/,
use:[
{
loader: 'style-loader',
options:{
insertAt: 'bottom'
}
},
'css-loader',
'less-loader'
]},
]
}
Nuevo archivo index.css
body {
background-color: pink;
}
index.js presenta css
require('./index.css')
6.3 Ejecutar npm run dev
A estas alturas, me he escrito confundido, y he repetido el siguiente contenido, no sé si puedes leerlo con claridad. Si hay algún problema, corríjanme y progresen juntos.