66 lines
1.5 KiB
Markdown
66 lines
1.5 KiB
Markdown
# 自动清空上次打包资源
|
|
|
|
## 1. 配置
|
|
|
|
```js{8}
|
|
const path = require("path");
|
|
|
|
module.exports = {
|
|
entry: "./src/main.js",
|
|
output: {
|
|
path: path.resolve(__dirname, "dist"),
|
|
filename: "static/js/main.js",
|
|
clean: true, // 自动将上次打包目录资源清空
|
|
},
|
|
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"],
|
|
},
|
|
{
|
|
test: /\.styl$/,
|
|
use: ["style-loader", "css-loader", "stylus-loader"],
|
|
},
|
|
{
|
|
test: /\.(png|jpe?g|gif|webp)$/,
|
|
type: "asset",
|
|
parser: {
|
|
dataUrlCondition: {
|
|
maxSize: 40 * 1024, // 小于40kb的图片会被base64处理
|
|
},
|
|
},
|
|
generator: {
|
|
// 将图片文件输出到 static/imgs 目录中
|
|
// 将图片文件命名 [hash:8][ext][query]
|
|
// [hash:8]: hash值取8位
|
|
// [ext]: 使用之前的文件扩展名
|
|
// [query]: 添加之前的query参数
|
|
filename: "static/imgs/[hash:8][ext][query]",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
plugins: [],
|
|
mode: "development",
|
|
};
|
|
```
|
|
|
|
## 2. 运行指令
|
|
|
|
```:no-line-numbers
|
|
npx webpack
|
|
```
|
|
|
|
观察 dist 目录资源情况
|