当前位置：首页 > news >正文

认识Webpack插件Plugin；CleanWebpackPlugin插件；HtmlWebpackPlugin；DefinePlugin；Mode模式

news 2025/6/26 3:24:02

1_认识插件Plugin

Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

上面表达的含义翻译过来就是：

Loader是用于特定的模块类型进行转换；
Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

2_CleanWebpackPlugin

前面演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹，可以借助于一个插件来帮助完成，这个插件就是CleanWebpackPlugin；

首先，先安装这个插件：

npm install clean-webpack-plugin -D

之后在插件中配置：

const { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = {//其余代码省略plugins: [new CleanWebpackPlugin()]
}

3_HtmlWebpackPlugin

还有一个不太规范的地方：

HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。
在进行项目部署的时，必然也是需要有对应的入口文件index.html；
所以也需要对index.html进行打包处理；

对HTML进行打包处理可以使用另外一个插件：HtmlWebpackPlugin；

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin()]
}

生成index.html分析

现在自动在dist文件夹中，生成了一个index.html的文件，该文件中也自动添加了打包的bundle.js文件；
文件是如何生成的？

默认情况下是根据ejs的一个模板来生成的；
在html-webpack-plugin的源码中，有一个default_index.ejs模块；

生成的index.html内容是默认的模板，也可以生成自己想要的模板

自定义HTML模板

如果想在自己的模块中加入一些比较特别的内容：

比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示；
比如在开发vue或者react项目时，需要一个可以挂载后续组件的根标签 <div id="app"></div>；

这个需要一个属于自己的index.html模块，比如说下面这个模板

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

自定义模板数据填充

上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。

在配置HtmlWebpackPlugin时，可以添加如下配置：

template：指定要使用的模块所在的路径；
title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin({title: "项目名称",template: "./index.html"})]
}

4_DefinePlugin

4.1_介绍

但是，这个时候编译还是会报错，因为自定义的模块中还使用到一个BASE_URL的常量。报错如下

ERROR in Template execution failed: ReferenceError:BASE_URL is not defined
ERROR in ReferenceError: BASE_URL is not defined

这是因为在编译template模块时，有一个BASE_URL：<link rel="icon" href="<%= BASE_URL %>favicon.ico">，但是并没有设置过这个常量值，所以会出现没有定义的错误；

这个时候可以使用DefinePlugin插件；

4.2_DefinePlugin的使用

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

const { DefinePlugin } = require("webpack")module.exports = {plugins: [new DefinePlugin({BASE_URL: "'./'",coder: "'xxx'", 	//当成一个全局变量，根据实际情况决定是否添加counter: "123"	 //当成一个全局变量})]
}