- Loader 是用于特定的模块类型进行转换。
- Plugin 可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等。
CleanWebpackPlugin
作用：自动删除 dist 文件夹
安装：npm install clean-webpack-plugin -D
使用：
const {CleanWebpackPlugin
} = require("clean-webpack-plugin")module.exports = {mode: "production",entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build")},plugins: [new CleanWebpackPlugin()]
}HtmlWebpackPlugin
安装：npm install html-webpack-plugin -D
使用：
const HtmlWebpackPlugin = require("html-webpack-plugin")module.exports = {mode: "production",entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build")}plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin()]
}执行 npm run build 之后，在 dist 目录中会有 index.html 文件，默认情况下是根据 ejs 的一个模板来生成的，在html-webpack-plugin的源码中，有一个default_index.ejs模块。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title><%= htmlWebpackPlugin.options.title %></title></head><body></body>
</html>自定义HTML模板
目的：创建一个属于自己的 index.html 模块。
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {mode: "production",entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build")},plugins: [new HtmlWebpackPlugin({title: "哈哈哈",template: "./src/test.html"})]
}
