一、 功能介绍
Webpack 本身功能是有限的:
- 开发模式:仅能编译 JS 中的 ES Module 语法
- 生产模式:能编译 JS 中的 ES Module 语法,还能压缩 JS 代码
二、webpack的基本使用
- 在项目中安装依赖
jacascript
npm i webpack webpack-cli -D
- 指定入口文件进行打包
在开发模式下打包
jacascript
npx webpack ./src/main.js --mode=development
在开发生产模式下打包
jacascript
npx webpack ./src/main.js --mode=production
- 文件输出
默认 Webpack 会将文件打包输出到 dist 目录下,我们查看 dist 目录下文件情况就好了
三、webpack的各项配置
在项目中使用webpack个性化配置时,需要在项目根目录新建文件webpack.config.js
,
javascript
module.exports = {
// 入口
entry: "",
// 输出
output: {},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "",
};
Webpack 是基于 Node.js 运行的,所以采用 Common.js 模块化规范
修改配置文件
javascript
// Node.js的核心模块,专门用来处理文件路径
const path = require("path");
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录,必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// filename: 输出文件名
filename: "main.js",
clean: true, // 自动将上次打包目录资源清空
},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
运行命令:npx webpack
四、样式处理配置
1. css
安装依赖:npm i css-loader style-loader -D
css-loader:负责将 Css 文件编译成 Webpack 能识别的模块
style-loader:会动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容
2. less
安装依赖:npm i npm i less-loader -D
less-loader:负责将 Less 文件编译成 Css 文件
3. scss
安装依赖:npm i sass-loader sass -D
sass-loader:负责将 Sass 文件编译成 css 文件
sass:sass-loader 依赖 sass 进行编译
配置:
javascript
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
...
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
plugins: [],
mode: "development",
};
注意:use 数组里面 Loader 执行顺序是从右到左
四、图片资源处理配置
过去在 Webpack4 时,我们处理图片资源通过 file-loader 和 url-loader 进行处理
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源
配置如下:
javascript
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
...
},
module: {
rules: [
...,
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
],
},
plugins: [],
mode: "development",
};
图片资源的优化:
javascript
...,
module: {
rules: [
...,
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
//解析过程中,小于10kb的图片会被base64处理
parser: {
dataUrlCondition: {
maxSize: 10 * 1024
}
}
},
],
},
四、字体图标资源处理配置
javascript
...,
module: {
rules: [
...,
{
test: /\.(ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
],
},
type: "asset/resource"
和type: "asset"
的区别:
type: "asset/resource"
相当于file-loader
, 将文件转化成 Webpack 能识别的资源,其他不做处理type: "asset"
相当于url-loader
, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
四、其他资源处理配置(视频、音频等)
就是在处理字体图标资源基础上增加其他文件类型,统一处理即可
javascript
...,
module: {
rules: [
...,
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
],
},