1.webpack打包其他资源
webpack打包图片
处理jpg\png等格式的图片对应的loader是:file-loader
下载file-loader
npm install file-loader -D
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use : {
loader : "file-loader" ,
options : {
// outputPath : "img",
name : "img/[name]_[hash:6].[ext]"
}
}
}
url-loader
可以将较小的文件(图片)转换成base64的URI,减少浏览器向服务器请求的次数.
安装url-loader:npm install url-loader -D
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use : {
loader : "url-loader" ,
options : {
// outputPath : "img",
name : "img/[name]_[hash:6].[ext]",
// 图片大小小于100kb打包
limit : 100 * 1024
}
}
}
url-loader可以替换file-loader.
2.认识asset modular type
webpack5之前加载资源需要用到一些loader;webpack5之后可以直接使用资源模块类型(asset modular type)代替loader.
- asset/resource: 对应之前的file-loader,发送一个单独的文件并导出
- asset/inline :对应url-loader,导出一个资源的data URI
- asset-source :对应raw-loader,导出资源的源代码.
- asset :在导出一个data URI和发送一个单独的文件之间自动选择,配置资源的体积限制.
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
type : "asset",
generator :{
filename :"img/[name]_[hash:6][ext]",
},
parser :{
dataUrlCondition :{
maxSize:100 *1024
}
}
}
打包图片资源
(1)利用file-loader方式
{
test:/\.(eot|svg|ttf|woff)$/,
use :{
loader :"file-loader",
options :{
name : "fonts/[name]_[hash:6].[ext]"
}
}
}
(2)利用asset modular type方式
{
test:/\.(eot|svg|ttf|woff)$/,
type : "asset/resource",
generator :{
filename :"fonts/[name]_[hash:6][ext]"
}
}
3.认识插件plugin
loader用于特定模块类型进行转换;
plugin用于执行更加广泛的任务,例如打包优化、资源管理、环境变量注入等。
1.CleanwebpackPlugin插件
借助CleanwebpackPlugin插件自动删除dist（build）文件夹。
安装插件 ： npm install clean-webpack-plugin -D
在webpack.config.js中导入插件：
// 导入plugin插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
使用插件：
plugins :[
new CleanWebpackPlugin()
]
2.HtmlWebpackPlugin插件
我们的HTML是在根目录下的，打包的dist（build）文件夹中没有index.html文件的；在进行项目部署时，需要有对应的入口文件index.html，所以也需要对index.html进行打包处理，使用HtmlWebpackPlugin插件。
安装插件 ： npm install html-webpack-plugin -D
// 导入htmlwebpackplugin插件
const HtmlWebpackPlugin =require("html-webpack-plugin");
plugins :[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin()
]
3.copyWebpackPlugin插件
将文件复制到打包的dist（build）文件中
下载：npm install copy-webpack-plugin -D
new copyWebpackPlugin({
patterns:[{
from : "路径",
to : "./",
globOptions:{
// 忽略的文件(不复制)
ignore:["**/index.html"]
}
}]
})
4.Mode配置
// 设置模式
// development 开发阶段
// production 准备打包上线的时候
mode : "development",
// 设置source-map 建立js映射文件,方便调试代码和错误.
devtool :"source-map",
