以下皆为拉勾教育课件内笔记
打包字体
下载字体文件
file-loader
module.exports = {
// ....
// 模块配置
module: {
rules: [
// 匹配字体⽂件
{
test: /\.(eot|svg|ttf|woff|woff2)$/i,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]'
}
}
}
]
}
}
copy-webpack-plugin
不需要处理的其他文件，可以直接复制到输出目录
详情查看：https://www.npmjs.com/package/copy-webpack-plugin
clean-webpack-plugin
每次打包之前，先删除输出目录中的历史文件（抱住输出目录中的打包文件是最新的）
详情查看：https://www.npmjs.com/package/clean-webpack-plugin
资源模块（asset modules）
Webpack 5 提供了一个新的特性 - 资源模块。资源模块是一种模块类型，它允许使用资源文件，即通过资源模块也可以加载图片或字体，而无需使用 loader 。
module.exports = {
// ....
// 模块配置
module: {
rules: [
// 处理图⽚
{
test: /\.(png|gif|jpe?g)$/i,
// use: {
// loader: "url-loader",
// options: {
// // 指定图⽚⼤⼩，⼩于该数值的图⽚，会被转成 base64
// limit: 8 * 1024, // 8 kb
// // [name] 是图⽚原来的名称
// // [ext] 是图⽚原来的后缀名
// name: "image/[name].[ext]",
// // url-loader 默认采⽤ ES Modules 规范进⾏解析，但是 html-loader 引⼊图⽚使⽤的是 CommonJS 规范
// // 解决：关闭 url-loader 默认的 ES Modules 规范，强制 url-loader 使⽤ CommonJS 规范进⾏打包
// esModule: false
// }
// }
// 使⽤资源模块
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024
}
},
generator: {
filename: "image/[name][ext]"
}
},
// 匹配字体⽂件
{
test: /\.(eot|svg|ttf|woff|woff2)$/i,
// use: {
// loader: 'file-loader',
// options: {
// name: 'fonts/[name].[ext]'
// }
// }
// 使⽤资源模块处理字体⽂件
// asset 可以在 asset/resource 和 asset/inline 之间进⾏选择
// 如果⽂件⼩于 8kb，则使⽤ asset/inline 类型
// 如果⽂件⼤于 8kb，则使⽤ asset/resource 类型
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024
}
},
generator: {
filename: "fonts/[name][ext]"
}
},
]
}
}
资源模块
资源模块(asset module)是⼀种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。详情查看：https://webpack.docschina.org/guides/asset-modules/
在 Webpack 5 之前，通常使用
- raw-loader 将文件导入为字符串
- url-loader 将文件作为 data URI 内联到 bundle 中
- file-loader 将文件发送到输出目录
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
- asset/resource 发送⼀个单独的文件并导出 URL。之前通过使用 file-loader 实现。
- asset/inline 导出⼀个资源的 data URI。之前通过使用 url-loader 实现。
- asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
- asset 在导出⼀个 data URI 和发送⼀个单独的文件之间自动选择。之前通过使用 url- loader，并且配置资源体积限制实现。
即：不需要上述 loader，我们在 Webpack 5 中，也可以处理图片字体等资源文件
例如：
module.exports = {
// ......
// 模块配置
module: {
rules: [
// 处理图⽚
// {
// test: /\.(png|gif|jpe?g)$/i,
// use: {
// loader: "url-loader",
// options: {
// // 指定图⽚⼤⼩，⼩于该数值的图⽚，会被转成 base64
// limit: 8 * 1024, // 8 kb
// // [name] 是图⽚原来的名称
// // [ext] 是图⽚原来的后缀名
// name: "image/[name].[ext]",
// // url-loader 默认采⽤ ES Modules 规范进⾏解析，但是 ht ml-loader 引⼊图⽚使⽤的是 CommonJS 规范
// // 解决：关闭 url-loader 默认的 ES Modules 规范，强制 url-loader 使⽤ CommonJS 规范进⾏打包
// esModule: false
// }
// }
// },
// 通过资源模块来处理图⽚
{
test: /\.(png|gif|jpe?g)$/i,
type: 'asset',
// 现在，webpack 将按照默认条件，⾃动地在 resource 和 inline 之 间进⾏选择：
// ⼩于 8kb 的⽂件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
// ⾃定义设置
parser: {
dataUrlCondition: {
maxSize: 8 * 1024
}
},
generator: {
filename: "image/[name][ext]" // 单独指定名字
}
},
// 通过资源模块来处理字体
{
test: /\.(eot|svg|ttf|woff|woff2)$/i,
// use: {
// loader: 'file-loader',
// options: {
// name: 'fonts/[name].[ext]'
// }
// }
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024
}
},
generator: {
filename: "fonts/[name][ext]" // 单独指定名字
}
},
// ......
]
}
}
开发服务器（Dev Server）
Webpack Dev Server（Webpack 开发服务器），详情查看：https://www.npmjs.com/package/webpack-dev-server
https://webpack.docschina.org/configuration/dev-server
安装
npm i webpack-dev-server -D
# 或者
npm i webpack-dev-server -g
运行
# webpack 4
webpack-dev-server ...
# webpack 5
webpack server ...
Webpack Dev Server 将打包内容放到内存中（而非磁盘），内存的读写性能远⼤于磁盘，因此 Webpack Dev Server 的热更新效率⼤于 browser-sync
运行 并 自动打开浏览器：webpack server --open
为 Webpack Dev Server 指定配置
更多配置详情：https://webpack.docschina.org/configuration/dev-server
// webpack.config.js
devServer: {
// 项⽬构建后路径
contentBase:resolve(__dirname,'output'),
// 启动 gzip 压缩
compress:true,
// 端⼝号
port:8080,
// ⾃动打开浏览器
open: true,
// 开启热更新
// Webpack 4
// hot: true,
// Webpack 5
liveReload: true, // 热更新（需要禁用 hot）
target: "web", // 热更新只适用于 web 相关的 targets
// 开启接⼝代理（解决接口跨域问题）
proxy: {
// http://localhost:8080/api
'/api': {
// http://localhost:8080/api/users -> https://api.github.com/api/users
target: 'https://api.github.com',
// http://localhost:8080/api/users -> https://api.github.com/users
pathRewrite: {
'^/api': ''
},
// 不能使⽤ localhost:8080 作为请求 GitHub 的主机名
changeOrigin: true
}
}
},
