webpack常用的三个plugin配置：webpack-dev-server，html-webpack-plugin，clean-webpack-plugin

àì夳堔傛蜴生んèń 2023-10-09 18:56 25阅读 0赞

![956c74fd2e244263886db7ba71886467.png][]

webpack-dev-server 热更新，html-webpack-plugin 自定义Index.html，clean-webpack-plugin 每次打包发布时，自动清理掉dist目录中的旧文件。

## webpack-dev-server插件 ##

作用：让webpack监听项目源代码的变化，从而进行自动打包构建热更新（不用每次修改代码后再重新构建一次）

安装：

npm i webpack-dev-server@3.11.0 -D

配置：

//package.json
    "script":{
    	//"dev":"webpack",
    	"dev":"webpack server",
    }

执行命令

npm run dev

再次修改代码，发现可以打包成功，但是页面并没有更新！！！

<script src="/bundle.js"></script>

原理：webpack-dev-server 打包的文件去哪了???

当配置了webpack-dev-server 之后，打包生成的文件存放到了内存中，而不是磁盘中（这么做是为了提高实时打包的速度）  
打包生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的  
所以需要再修改 index.html

/ 斜线代表项目的根目录，dist目录就可以删掉了，因为开启了实时打包，打包后的文件放到了内存中。打包部分优化：利用webpack-dev-server此插件：自动打开端口号，换一个端口号

//webpack.config.js
    module.exports = {
    	mode:'development',
    	...,
    	devServer:{
    		open:true,//初次打包完成后，自动打开浏览器
    		host:'127.0.0.1',//指定实时打包所使用的主机地址
    		port:'8081',//指定端口号
    }

## html-webpack-plugin插件 ##

作用：html插件，比如：项目运行在8080端口，打开之后还需要在地址栏中输入localhost:8080/src/index.html才能打开项目首页，但我们想打开8080,就能看到index.html页面，那么我们需要把index.html文件复制到根目录下  
安装

npm i html-webpack-plugin@5.3.2 -D

配置：

//webpack.config.js
    //1. 导入html插件，得到一个构造函数
    const HtmlPlugin = require('html-webpack-plugin')
    //2. 创建html实例对象
    const htmlPlugin = new HtmlPlugin({
    	template:'./src/index.html',//源文件
    	filename:'./index.html'，//指定源文件生成的文件 存放的地址
    })
    //3. 挂载html实例对象
    module.exports = {
    	mode:'development',
    	.....
    	plugins:['htmlPlugin'],
    }

注：  
配置到根目录下的index.html也是存放在内存中，在项目文件夹中看不到，但在浏览器中输入地址 locahost:8080中可以看到页面效果)  
浏览器中右键点击查看源代码，发现多了一行代码<script src="bundle.js"></script>,所以index.html就不用手动引入打包后的文件了

## clean-webpack-plugin插件 ##

作用：每次打包发布时，自动清理掉dist目录中的旧文件

安装：

npm i clean-webpack-plugin -D

配置

//webpack.config.js
    //按需导入插件、得到插件的构造函数之后，创造插件的实例对象
    const {CleanWebpackPlugin} = require('clean-webpack-plugin')
    const cleanPlugin = new CleanWebpackPlugin()
    module.exports = {
    	mode:'development',
    	...,
    	plugins:['htmlPlugin','cleanPlugin'],//挂在插件
    }

[956c74fd2e244263886db7ba71886467.png]: https://img-blog.csdnimg.cn/956c74fd2e244263886db7ba71886467.png