网站首页 > 技术文章正文

Webpack4 学习 - 04:使用 Plugins 插件

nanyue 2024-10-09 13:14:28 技术文章 19 ℃

什么是 Plugins ？

plugins 顾名思义，就是插件，它可以在 webpack 运行到某个时刻的时候，来做一些事情。

下面就举一些使用 plugins 的例子。

使用 HtmlWebpackPlugin

HtmlWebpackPlugin 做什么用的呢？文档解析：该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body中的所有 webpack 包。

是不是这样呢，下面就来演示一下吧，首先把暂时没用的文件如 .css 和 index.html 都删掉，目录结构如下：

index.js 文件内容如下：

var root = document.getElementById('root');
var wp = document.createElement('div');
wp.innerText = 'Hello, Webpack';
root.append(wp);

安装 HtmlWebpackPlugin 插件：

npm install html-webpack-plugin --save-dev

想要使用这个插件，就要在 webpack.config.js 中去引入它并配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入plugin
module.exports = {
 entry: {
 main: './src/index.js'
 },
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {},
 plugins: [
 new HtmlWebpackPlugin() // 实例化plugin
 ],
 mode: 'development'
}

配置完成后，运行打包命令，查看结果，发现果然在 dist 目录下，自动创建好了一个 .html 文件：

并且自动把打包好的 js 文件给引入了进来：

到此，打包成功了，也证明了 HtmlWebpackPlugin 会在打包结束后，自动生成一个 html 文件，并把打包生成的 js 文件自动引入到这个 html 文件中去。

打包成功是成功了，但是运行 index.html 看一下，会发现页面空白，什么也没有。这是因为写在 index.js 中的代码

var root = document.getElementById('root');

需要一个 id = root 的 div，但生成的文件中，并没有这个 div，怎么办呢？查看文档，发现 HtmlWebpackPlugin 可以配置一个模板文件，并且会使用这个模板文件来生成 html 文件。

在 src 目录下新建 index.html 模板文件：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Webpack App</title>
</head>
<body>
 <div id="root"></div>
</body>
</html>

配置这个模板文件：

plugins: [new HtmlWebpackPlugin({template: 'src/index.html'})]

再运行打包命令，查看结果，发现生成的 html 文件已经把

<div id="root"></div>

添加上去了，说明模板文件的配置起了作用。打开页面会看到正确输出了 Hello, Webpack 字样，到此打包正确完成了。

使用 CleanWebpackPlugin

修改一下 webpack.config.js 中的 output 配置，把输出的文件名从 bundle.js 改为 main.js，然后运行打包，查看一下结果：

这时候会发现，虽然 main.js 生成了，也被引入到了 index.html 文件中，但是原来的 bundle.js 还遗留了下来，需要去手动删除。如果项目较大，文件较多，改动较频繁，这样的遗留文件会越来越多，手动一个个删除肯定是费事费力的，这时就需要 CleanWebpackPlugin 来帮忙自动清理了。

安装 CleanWebpackPlugin：

npm install clean-webpack-plugin -D

和HtmlWebpackPlugin一样，修改 webpack.config.js 的配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
 entry: {
 main: './src/index.js'
 },
 output: {
 filename: 'main.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {},
 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 new CleanWebpackPlugin(['dist']) // 清理dist目录
 ],
 mode: 'development'
}

运行打包，会看到 dist 目录下的 bundle.js 文件已将没有了。查看打包的过程：

这个过程说明了，一开始打包的时候，CleanWebpackPlugin 就把 dist 文件夹给删除了，每次打包，它都会删除 dist 文件夹。

上一篇：了不起的 Webpack HMR 学习指南(下)「含源码讲解」
下一篇： Webpack 4.0发布，放弃支持Node.js4，性能大幅提升!

网站首页 > 技术文章 正文

Webpack4 学习 - 04:使用 Plugins 插件

什么是 Plugins ？

猜你喜欢

网站首页 > 技术文章正文