继上篇Webpack 初体验后，本章将讲解如何进行打包资源文件，图片的打包以及其它资源呢的打包。以及Webpack的 devServer 自动化。
写在前面说得话
此篇文章为记录学习Webpack，
如果觉得文章对你收获不大，请各位大佬轻喷。
如果有收获得话，关注以后获取更多技术内容。
打包图片资源
Webpack 用来处理一些文件时， 是选用对应的loader 来 处理打包的，知道这个原理，就好办了。
例如： 打包图片，就找对应的 打包图片的 loader， 1. 安装 2. 使用 ，这样就完成了处理打包。
图片打包使用的是loader 为
url-loader和file-loader来处理打包图片test： 自定义要处理哪些图片格式
使用
url-loader时，可通过options 来配置一些图片的属性，例如大小，次例子，当图片大小 小于 1MB 转化为Base64 来处理
具体实现
在项目的根目录下 创建一个 webpack.config.js
上面是 Webpack 的具体配，入口文件为 ./src/index.js
在入口文件 index.js 中 导入 要打包的文件，此例子是打包图片资源，
index.js
import './index.css'
index.css
.p1{
width: 200px;
height: 200px;
background: url('./img/f4.png');
}
.p2{
width: 200px;
height: 200px;
background: url('./img/f6.png');
}
.p3{
width: 200px;
height: 200px;
background: url('./img/f7.png');
}
打包后的文件 显示内容
打包其它资源
所谓打包其它资源是，处理之前没有处理过的文件。
此demo 为处理 字体， 采用loader 为
file-loader
关键实现代码
// 模块
module:{
// 打包规则
rules: [
// 处理css
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 处理其它资源
{
// exclude 排除， 除了css js html ，其它格式都进行处理，
// 可以自定义排除 之前处理后的文件
exclude: /\.(css|js|html)$/,
// 采用file-loader
loader:'file-loader'
}
]
}
打包后的文件
优化后，打包名
// 模块
module:{
// 打包规则
rules: [
// 处理css
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 处理其它资源
{
exclude: /\.(css|js|html)$/,
loader:'file-loader',
//通过options 配置来修改文件的配置操作
options: {
// hash：变量名长度 ext 为扩展名
name: '[hash:8].[ext]'
}
}
]
}
devServe 配置
自动检测src/ 目录下文件变化， 自动刷新页面,自动打包文件
安装依赖
npm i webpack-dev-server -D启动指令
npx webpack-dev-server
主要配置代码
// 在webpack.config.js 下配置devServer
devServer:{
contentBase:resolve(__dirname,'build'),
// 启动gzip压缩
compress:true,
// 端口号
port:3000,
// 自动打开网站
open: true
}
