CleanWebpackPlugin:在 webpack 打包输出前将上次打包内容清空
开发思路(什么时候执行 怎么做):
- 如何在打包输出前执行?需要使用
compiler.hooks.emit
钩子, 它是打包输出前触发。 - 如何清空上次打包内容?
- 获取打包输出目录:通过 compiler 对象。
- 通过文件操作清空内容:通过
compiler.outputFileSystem
操作文件。
首先需要引入
const CleanWebpackPlugin = require("./plugins/clean-webpack-plugin");
new CleanWebpackPlugin()
清除文件(readdirSync 读取文件夹下面的所有文件 statSync分析文件信息 isDirectory判断是文件夹还是文件 unlinkSync删除文件)
class CleanWebpackPlugin {
apply(compiler) {
// 2. 获取打包输出的目录
const outputPath = compiler.options.output.path;//E:\ECMAScript6-11\webpack_loader\dist
const fs = compiler.outputFileSystem;
// 1. 注册钩子:在打包输出之前 emit
compiler.hooks.emit.tap("CleanWebpackPlugin", (compilation) => {
// 3. 通过fs删除打包输出的目录下的所有文件
this.removeFiles(fs, outputPath);
});
}
//removeFiles调用方法
removeFiles(fs, filepath) {
// 想要删除打包输出目录下所有资源,需要先将目录下的资源删除,才能删除这个目录
// 1. 读取当前目录下所有资源
const files = fs.readdirSync(filepath);//返回数组
//console.log(files); // [ 'images', 'index.html', 'js' ]
// 2. 遍历一个个删除
files.forEach((file) => {
// 2.1 遍历所有文件,判断是文件夹还是文件
const path = `${filepath}/${file}`;//组成路径
const fileStat = fs.statSync(path);
// console.log(fileStat);
if (fileStat.isDirectory()) {
// 2.2 是文件夹,就得删除下面所有文件,才能删除文件夹
this.removeFiles(fs, path);
} else {
// 2.3 是文件,直接删除
fs.unlinkSync(path);
}
});
}
}
module.exports = CleanWebpackPlugin;
th}/${file}`;//组成路径
将配置文件的clean:true删除
const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
//插件需要先引入再使用
const TestPlugin = require("./plugins/test-plugin2");
const BannerWebpackPlugin = require("./plugins/banner-webpack-plugin");
const CleanWebpackPlugin = require("./plugins/clean-webpack-plugin");
module.exports = {
entry: "./src/main.js",//根据找到依赖
output: {
path: path.resolve(__dirname, "./dist"),
filename: "js/[name].js",// filename: 输出文件名
//clean: true,
},
module: {//编译记载配置
rules: [
// {
// test: /\.js$/,//处理js文件
// loader: "./loaders/test-loader.js",//将要处理文件作为参数传到test-loader.js
// },
{
test: /\.js$/,//处理js文件
// use: ["./loaders/demo/test1","./loaders/demo/test2"],
// loader: "./loaders/demo/test3",
// use: ["./loaders/demo/test4","./loaders/demo/test5","./loaders/demo/test6"],
loader: "./loaders/clean-log-loader",
},
{
test: /\.js$/,//处理js文件
loader: "./loaders/banner-loader/index.js",
options:{
author:"老王",
// age:"34"
}
},
{
test: /\.js$/,
loader: "./loaders/babel-loader",
options: {
presets: ["@babel/preset-env"],//传入的预设选项@babel/preset-env
},
},
{
test: /\.(png|jpe?g|gif)$/,
loader: "./loaders/file-loader",
type: "javascript/auto", // 阻止webpack默认处理图片资源,只使用file-loader处理
},
{
test: /\.css$/,
// use: ["style-loader", "css-loader"],
use: ["./loaders/style-loader","css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public/index.html"),
}),
//new TestPlugin(),
new BannerWebpackPlugin({
author: "老王",
}),
new CleanWebpackPlugin()
],
mode: "production",
};