1. Recursos de estilo de empaque (con cargador)
webpack solo puede procesar recursos js / json, por lo que el paquete de recursos de estilo debe pasarse loadery loaderdebe webpack.config.jsdefinirse en el (archivo de configuración del paquete web)
El webpack.config.jsarchivo de configuración se usa para indicar qué operaciones debe realizar el paquete web. Cuando se ejecuta el comando del paquete web, se cargarán los elementos de configuración que se encuentran en el interior y la sintaxis del archivo de configuración usa commonjs. El motivo es que todas las herramientas de compilación se basan en nodejs. La modularización de Nodejs usa commonjs por defecto, que es diferente de .jsla sintaxis es6 utilizada por los archivos fuente js en el proyecto.
Estructura del proyecto:
bulid
src
Index.js
Index.css
webpacl.config.js
webpack.config.jsestructura:
// resolve用来拼接绝对路径
const {
resolve } = require('path');
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'main.js',
// 输出路径
// 表示输出到当前文件所属目录下的bulid目录
path: resolve(__dirname,'bulid')
},
// loader的配置
module: {
rules:[
// 详细loader配置
]
},
// plugins配置
plugins: [
// 详细plugins的配置
],
// 模式 表明此时是开发者模式
mode: 'development',
}
loaderConfiguración (configuración de empaquetado de recursos css):
module: {
rules:[
// 详细loader配置
{
// 匹配哪些文件
// 此处表示匹配以.css结尾的文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组loader执行顺序：从右到左，从下到上，依次执行，也即先执行css-loader，再执行style-loader
// 创建style标签，将js中的样式资源（上一部分所形成的样式字符串）插入到style标签中，添加到head中
'style-loader',
// 将css文件变成commonjs模块加载在js中，里面内容是样式字符串
'css-loader'
]
}
]
}
Nota: El cargador mencionado anteriormente debe descargarse antes de su uso:npm i -s style-loader css-loader
Ejecutar empaquetado, debido a que se agrega el archivo de configuración, el webpackempaquetado se puede realizar ejecutando la entrada
Nota: diferentes archivos deben ser procesados por diferentes cargadores
Por lo tanto, la configuración de procesamiento para menos archivos es:
Descargue el paquete primero :, npm i -s style-loader css-loader less-loader lessporque less-loader depende de menos, así que también descargue menos, de lo contrario, se informará un error
module: {
rules:[
// 处理css文件
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
// 处理less文件
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
'less-loader'
]
}
]
}
2. Empaquetar recursos html (usando complementos)
La configuración del paquete de recursos html se puede configurar mediante complementos. A diferencia de la configuración del cargador (descargar primero el cargador y luego usarlo), la configuración de los complementos consta de tres pasos, a saber:
-
descargar
npm i html-webpack-plugin -DDonde -D significa descargar en modo desarrollador
-
Introducir
const htmlWebpackPlugin = require('html-webpack-plugin') -
usar
Como
htmlWebpackPlugines un constructor, se llama creando una instanciaplugins: [ new htmlWebpackPlugin(); ],Si solo se llama de la manera anterior, la función real es: de forma predeterminada, se creará un archivo html vacío (sin ningún estilo js) y todos los recursos (JS / CSS / imágenes ...) que están empaquetados y la salida se importará automáticamente.
Sin embargo, en circunstancias normales, se requiere un archivo html estructurado, por lo que se adopta la siguiente configuración
plugins: [ new htmlWebpackPlugin({ template: './src/index.html', filename: 'main.html'// 指定输出文件名 }); ],La función de la configuración anterior es:
./src/index.htmlcompletar archivos html vacíos e importar automáticamente todos los recursos (js / css / pictures ...) que están empaquetados y generados.Nota: Dado que el html empaquetado introducirá automáticamente todos los recursos de la salida empaquetada, no es necesario
./src/index.htmlvolver a importarlo como una plantilla , de lo contrario, puede ser propenso a errores inesperados.
3. Empaquetar recursos de imágenes
-
La imagen se introduce en el archivo de estilo, pero la imagen no existe en el archivo html.
css
.box1 { width: 200px; height: 200px; background-image: url(../imgs/1.PNG); background-repeat: no-repeat; } .box2 { width: 300px; height: 200px; background-image: url(../imgs/2.PNG); background-repeat: no-repeat; } .box3 { width: 400px; height: 200px; background-image: url(../imgs/3.PNG); background-repeat: no-repeat; }const { resolve } = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); // console.log(); module.exports = { entry: './src/index.js', output: { filename: 'bulid.js', path: resolve(__dirname,'bulid') }, module: { rules: [ { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { // 处理图片资源 严格区分大小写 url-loader对图片路径引入的处理 test: /\.(PNG|jpg|gif)$/, // 使用单个loader采用loader声明，使用多个loader采用use处理 // 由于url-loader依赖于file-loader 因此下载url-loader 也需要下载file-loader loader: 'url-loader', options: { // 图片大小小于8kb，就会被base64处理 // 优点：减少请求数量，减轻服务器压力 // 缺点：图片体积会更大，导致文件请求速度变慢，所以不是所有的图片大小都适合base64处理，一般处理小于8kb~12kb的图片 limit: 8 * 1024 } } ] }, plugins: [ new htmlWebpackPlugin({ template: './src/webpack_02.html', filename: 'index.html' }) ], mode: 'development' }Resultado de embalaje:
Las imágenes de menos de 8 kb están codificadas en base64, las imágenes de más de 8 kb están empaquetadas, el nombre de la imagen es un valor hash único generado de acuerdo con la imagen actual, y para la misma imagen, el paquete web no la procesará repetidamente, sino que solo la empaquetará una vez.
Pero en circunstancias normales, la imagen se importará en la etiqueta html y la imagen se importará en el html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hhhh</title> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <img src="./imgs/2.PNG" alt="2.PNG"> </body> </html>Todavía use la configuración anterior para el procesamiento de paquetes, el resultado: el img-> src en el archivo html sigue siendo el mismo y la imagen no se puede mostrar en el navegador. Razón: no hay
./imgs/2.PNGrecurso de imagen en el directorio index.html después empaquetado , para que pueda ver la configuración anterior. No puede procesar recursos de imagen en html, pero solo puede procesar recursos de imagen introducidos por css / less . -
Imágenes de proceso introducidas en html:
Añadir:
html-loader// 此处只展示loader部分，原因：新增内容只在loader中 module: { rules: [ { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { // 处理图片资源 严格区分大小写 test: /\.(PNG|jpg|gif)$/, // 使用单个loader采用loader声明，使用多个loader采用use处理 // 由于url-loader依赖于file-loader 因此下载url-loader 也需要下载file-loader loader: 'url-loader', options: { // 图片大小小于8kb，就会被base64处理 // 优点：减少请求数量，减轻服务器压力 // 缺点：图片体积会更大，导致文件请求速度变慢，所以不是所有的图片大小都适合base64处理，一般处理小于8kb~12kb的图片 limit: 8 * 1024 } }, { test: /\.html$/, // 处理html文件中的img图片（负责引入img,从而能被url-loader进行处理） loader: 'html-loader' } ] }Después de configurar el archivo, empaquételo nuevamente y el resultado es el siguiente:
etiqueta img:
<img src="3e4643f01f5a182ea427.PNG" alt="2.PNG">Pero después de hacer doble clic y empaquetar, la
3e4643f01f5a182ea427.PNGimagen no se puede mostrar y se muestra un mensaje de error:image not loaded Try to open it externally to fix format problemmientras se abre el navegadorindex.html, la imagen aún no se puede mostrar. El motivo es: url-loader usa el análisis modular es6 de forma predeterminada, y html-loader usa commonjs para importar imágenes. Análisis modular. Diferentes análisis causan problemas. Solución: Desactive la modularización es6 de url-loader y utilice el análisis de comonjs. Para webpack5, también debe desactivar la modularización de es6 en html-loader{ // 处理图片资源 严格区分大小写 test: /\.(PNG|jpg|gif)$/, // 使用单个loader采用loader声明，使用多个loader采用use处理 // 由于url-loader依赖于file-loader 因此下载url-loader 也需要下载file-loader loader: 'url-loader', options: { // 图片大小小于8kb，就会被base64处理 // 优点：减少请求数量，减轻服务器压力 // 缺点：图片体积会更大，导致文件请求速度变慢，所以不是所有的图片大小都适合base64处理，一般处理小于8kb~12kb的图片 limit: 8 * 1024, esModule: false, // 给图片重命名 [hash:10]取图片的hash的前10位 [ext]取文件原来扩展名 name: '[hash:10].[ext]' } }, { test: /\.html$/, // 处理html文件中的img图片（负责引入img,从而能被url-loader进行处理） loader: 'html-loader', options: { esModule: false } }Resultado final: imagen de pantalla completa
-
Empaquetar otros recursos
module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] }, // 打包其他资源（除了html js css 资源以外的资源）其他资源是指：已配置处理的资源之外的没有处理的资源 { // 排除css html js 以为的资源 exclude: /\.(css|html|js)$/, // 或者写成：test: \./(xx|xxx)$\采用此方式需要一个一个匹配 loader: 'file-loader' } ] },