这是Webpack入门篇的最终篇--Plugin 的使用
Webpack 插件（Plugin）可以实现从文件优化、代码拆分到生成文件、自动化任务等一系列强大的功能。今天，我们将介绍几个常用的 Webpack 插件，并提供具体的使用例子，帮助大家更好地理解如何在实际项目中应用这些插件。
1. HtmlWebpackPlugin：自动生成 HTML 文件
插件简介
HtmlWebpackPlugin 是一个非常常用的 Webpack 插件，它可以自动生成一个 HTML 文件，并且将打包后的 JS 和 CSS 文件自动注入到 HTML 文件中，避免我们手动管理这些文件的引入。
安装
npm install html-webpack-plugin --save-dev
使用示例
首先，我们需要在 webpack.config.js 配置文件中引入并使用该插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 指定 HTML 模板
filename: 'index.html', // 生成的 HTML 文件名
inject: 'body', // 自动注入 JS 文件的位置（body 或 head）
})
]
};
解析
-
template: 指定原始的 HTML 模板，可以是一个文件路径或者一个字符串。 -
filename: 生成的 HTML 文件名称。 -
inject: 控制生成 HTML 文件时，如何注入 JavaScript 文件。'head'或'body'，默认是'body'，即将<script>标签插入到body标签结束前。
2. MiniCssExtractPlugin：提取 CSS 为单独的文件
插件简介
在开发过程中，我们通常会将 CSS 文件嵌入到 JS 中，但在生产环境下，这种方式会增加 JS 文件的大小，影响性能。MiniCssExtractPlugin 可以帮助我们将 CSS 从 JavaScript 文件中提取出来，生成独立的 CSS 文件。
安装
npm install mini-css-extract-plugin --save-dev
使用示例
配置 webpack.config.js 以便提取 CSS 文件：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader, // 使用插件来提取 CSS
'css-loader' // 解析 CSS 文件
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css', // 设置生成的 CSS 文件名
})
]
};
解析
-
MiniCssExtractPlugin.loader: 用于提取 CSS 文件。 -
filename: 设置输出的 CSS 文件名。
3. CleanWebpackPlugin：清理构建目录
插件简介
CleanWebpackPlugin 插件在每次构建之前会清空 output.path 目录，避免过时的文件残留在输出目录中。它有助于保持构建目录的整洁，尤其是在进行多次构建时。
安装
npm install clean-webpack-plugin --save-dev
使用示例
在 webpack.config.js 中使用 CleanWebpackPlugin：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
plugins: [
new CleanWebpackPlugin()
]
};
解析
该插件默认会清空 dist 文件夹（你可以在插件配置中修改默认行为），每次构建时都会删除之前的输出文件，确保输出目录只包含最新的构建文件。
4. TerserWebpackPlugin：压缩 JavaScript 代码
插件简介
TerserWebpackPlugin 是 Webpack 默认的 JavaScript 压缩插件，它可以帮助我们优化代码，移除不必要的代码、空白字符等，提升性能。
安装
npm install terser-webpack-plugin --save-dev
使用示例
Webpack 5 默认集成了 TerserWebpackPlugin，如果使用 Webpack 4 或以下版本，可以通过以下方式手动配置：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production', // 确保使用生产模式
optimization: {
minimize: true, // 启用压缩
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 删除所有 console
},
},
}),
],
},
};
解析
-
drop_console: true: 在压缩时删除console语句，减少生产环境的冗余代码。
