webpack5基础--07_自动清空上次打包资源

自动清空上次打包资源

1. 配置

js 复制代码
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 目录资源情况

相关推荐
CAD老兵1 分钟前
前端 Source Map 原理与结构详解
前端
gnip5 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长16 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_16 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101018 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang18 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi19 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课22 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥23 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe101024 分钟前
6-1. 实现 useState
前端