5大核心概念
- entry（入口）：webpack入口文件
- output（输出）：webpack出口文件
- loader（加载器）：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
- plugins（插件）：扩展webpack功能
- mode（模式）：生产模式（development）/开发模式（production）
module.exports = {
// 入口
entry: "",
// 输出
output: {},
// 加载器 loader
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "",
};
处理html资源
npm i html-webpack-plugin -D // 下载所需插件
配置
const HtmlWebpackPlugin = require('html-webpack-plugin') // 导入处理html插件
// 插件
plugins: [
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, 'public/index.html')
})
]
不需要再手动引入script，link标签等 生产模式默认开启html，js 压缩 不需要配合
处理样式资源
Webpack 本身是不能识别样式资源的，所以需要借助 加载器（loader）来实现 Webpack 解析样式资源
处理CSS / less
- 下载所需的加载器 loader
// css
npm i css-loader style-loader -D
// less
npm install less less-loader --save-dev
- 配置
const path = require("path")
module.exports = {
// 入口
entry: './src/main.js',
// 输出
output: {
// path：文件输出目录， 绝对路径
// path.resolve()方法返回一个绝对路径，__dirname 当前文件夹的绝对路径
path: path.resolve(__dirname,'dist'),
//filename：输出的文件名
filename: 'main.js'
},
// 加载器
module: {
// loader配置
rules: [
// test : 正则匹配对应的文件
{
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
{
test:/\.less$/,
use:["style-loader", "css-loader","less-loader"]
}
]
},
plugins: [], // 插件
mode: "development" // 开发者模式
}
- 提取Css成单独文件
不处理之前Css 文件会被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式 这样对于网站来说，会出现闪屏现象，用户体验不好
npm i mini-css-extract-plugin -D // 下载所需要的插件
配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 导入插件
module:{
rules: [
{
test: /\.css$/,
// 需要替换 "style-loader"
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test:/\.less$/,
// 需要替换 "style-loader"
use:[MiniCssExtractPlugin.loader, "css-loader","less-loader"]
}
]
}，
// 插件
plugins: [
new MiniCssExtractPlugin({
// 定义输出的目录和文件名
filename:'static/css/main.css'
})
]
提取成单独文件后需要配合html-webpack-plugin插件使用 或者 使用link标签引入
- 提取Css成单独文件
下载插件
npm i css-minimizer-webpack-plugin -D
配置
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin') // 导入css压缩插件
// 插件
plugins: [
// css压缩
new CssMinimizerWebpackPlugin()
]
处理js资源
-
针对 js 兼容性处理，使用 Babel 来完成
-
针对代码格式，使用 Eslint 来完成
处理图片资源
webpack已经有内置的loader可以处理图片资源了，只需要简单配置即可
module:{
rules:[
{
test: /.(png|jpe?g|gif|webp)$/,
type: "asset"
}
]
}
修改图片资源路径及名称，资源优化
module:{
rules:[
{
test: /.(png|jpe?g|gif|webp)$/,
type: "asset"，
generator: {
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: 'static/imgs/[hash:8][ext][query]'
}，
parser: {
dataUrlCondition: {
// 优点：减少请求次数。缺点：体积变的更大
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
}
}
}
]
}
处理字体图标资源/音视频等资源
type: "asset/resource"和type: "asset"的区别：
type: "asset/resource"相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理type: "asset"相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
module:{
rules:[
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
]
}
