1.打包样式资源（采用loader）
webpack只能处理js/json资源，因此对于样式资源的打包需要通过loader，而loader需要在webpack.config.js（webpack配置文件）中进行定义
其中webpack.config.js配置文件用于指示webpack需要做哪些操作，当运行webpack指令的时候，会加载里面的配置项，且此配置文件语法采用commonjs，原因是：所有构建工具都是基于nodejs平台运行的，而基于nodejs模块化默认采用commonjs，而这个不同于项目中js源文件.js采用的es6语法。
项目结构：
bulid
src
index.js
index.css
webpacl.config.js
webpack.config.js结构：
// 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',
}
loader配置（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'
]
}
]
}
注意：以上涉及到的loader，需要先下载再使用：npm i -s style-loader css-loader
执行打包，由于添加了配置文件，则执行输入webpack即可进行打包
注意：不同文件必须配置不同loader处理
因此对于less文件的处理配置为：
先下载包：npm i -s style-loader css-loader less-loader less ，由于less-loader依赖于less，因此也要下载less，否则报错
module: {
rules:[
// 处理css文件
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
// 处理less文件
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
'less-loader'
]
}
]
}
2.打包html资源(采用plugins)
html资源的打包配置可以采用plugins进行配置的，不同于loader配置（先下载loader，再使用loader），plugins的配置有三个步骤，分别是：
-
下载
npm i html-webpack-plugin -D其中-D表示以开发者模式下载
-
引入
const htmlWebpackPlugin = require('html-webpack-plugin') -
使用
由于
htmlWebpackPlugin是一个构造函数，所以采用创建实例的方式调用plugins: [ new htmlWebpackPlugin(); ],如果仅仅是以上方式调用，实际的功能是：默认会创建一个空的html文件（没有任何样式 js的），并自动引入打包输出的所有资源(JS/CSS/图片…)
但是一般情况下需要有结构的html文件，则采取以下的方式配置
plugins: [ new htmlWebpackPlugin({ template: './src/index.html', filename: 'main.html'// 指定输出文件名 }); ],以上配置的功能是：采用
./src/index.html填充空的html文件，并自动引入打包输出的所有资源（js/css/图片…）注意：由于打包html会自动引入打包输出的所有资源，因此不用在作为模板的
./src/index.html中再次引入，不然可能容易出现意想不到的错误
3.打包图片资源
-
图片在样式文件中引入，而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' }打包结果：
小于8kb的图片进行base64编码处理，大于8kb的图片被打包，图片名称为根据当前图片生成的唯一的hash值，且对于相同的图片，webpack不会重复处理，只会打包一次
但是一般情况下，会在html标签中对图片进行引入，在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>还是采用以上的配置进行打包处理，结果：html文件中的img->src依然如初，浏览器中显示不了图片，原因：打包之后的index.html目录下没有
./imgs/2.PNG图片资源，所以，可以看出以上配置并不能处理html中的图片资源，只能处理css/less引入的图片资源，解决： -
处理html中引入的图片：
添加：
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' } ] }配置文件之后，再次打包，结果如下：
img标签：
<img src="3e4643f01f5a182ea427.PNG" alt="2.PNG">但是双击打包之后的
3e4643f01f5a182ea427.PNG，显示不了图片，且显示出错信息：image not loaded Try to open it externally to fix format problem，同时浏览器打开index.html，仍然显示不了该图片，原因是：url-loader默认使用es6模块化解析，而html-loader引入图片采用的是commonjs模块化解析，解析不同导致问题的出现，解决：关闭url-loader的es6模块化，使用comonjs解析。对于webpack5，还需要在html-loader中关闭es6模块化{ // 处理图片资源 严格区分大小写 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 } }最后结果：完整显示图片
-
打包其他资源
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' } ] },