webpack plugin 插件的运用

￡神魔★判官ぃ 2023-02-13 11:18 15阅读 0赞

# 前言 #

`loader` 与 `plugin`是`webpack`中非常常见的两个模块，`loader` 用于加载不同的文件，`plugin` 用于优化打包过程。`loader`不能解决的问题基本上可以使用`plugin`插件来解决。

### 文章目录 ###

*  前言
 *  自定义插件
 *   *  创建插件
     *  引用插件
 *  常用插件
 *   *  clean-webpack-plugin
     *  html-webpack-plugin
     *  copy-webpack-plugin

# 自定义插件 #

## 创建插件 ##

// ./plugins/MyPlugins.js
    
    module.exports = class MyPlugin { 
        apply(compiler) { 
            compiler.hooks.done.tap('MyPluginDone', function(compilation) { 
                console.log('编译完成')
            })
        }
    }

自定义一个简单的插件，如上存在两个对象 `Compiler` 和 `Compilation`，`Compiler`对象代表着 `webpack` 环境配置，在启动`webpack`的时候就会创建，而`Compilation`是当任何一个文件发生变化是就会创建一个`Compilation`。`Compiler`只会创建一次，`Compilation`可能会创建多次。  
![在这里插入图片描述][20200528170149624.png_pic_center]

## 引用插件 ##

// webpack.config.js
    
    const MyPlugin = require('./plugins/MyPlugins.js');
    module.exports = { 
        mode: 'development',
        plugins: [
            new MyPlugin()
        ]
    }

引用插件后我们开始编译，在编译的时候会触发我们自定义的插件的事件。当然插件的事件是在是太多了，我们无法全部记住，需要用到时我们可以去官网翻阅手册 [compilation-hooks 手册][compilation-hooks]。

# 常用插件 #

## clean-webpack-plugin ##

在我们不断打包的中，可能输出的文件名是`hash`值，每次打包的文件名都不一样，打包出来的新文件不回去替换掉旧文件，多次打包后，文件会越来越多，这个时候我们可以使用`clean-webpack-plugin`插件来进行清空输出的目录。

**安装**

`npm install clean-webpack-plugin --save-dev`

**使用**

// webpack.config.js
    
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    module.exports = { 
    	mode: "development",
    	output: { 
    		filename: "[chunkhash:5].js"
    	}
    	plugins: [
    		new CleanWebpackPlugin()
    	]
    }

当我们再次打包时，每次输出文件夹都会进行清空。

## html-webpack-plugin ##

打包出来的`js`文件，我们还需要手动去添加一个`html`页面，在引入打包后的`js`文件才可以看到效果，这样十分不方便，我们可以使用`html-webpack-plugin`插件来自动帮我们生成`html`文件金并且引入打包后的`js`文件

**安装**

`npm install html-wepack-plugin --save-dev`

**使用**

// webpack.config.js
    
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
    	mode: "development",
    	plugins: [
    		new HtmlWebpackPlugin()
    	]
    }

我们还可以在`HtmlWebpackPlugin`中传递参数

// webpack.config.js
    
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
    	mode: "development",
    	plugins: [
    		new HtmlWebpackPlugin({ 
    			template: "./public/index.html",  	// 设置模板
    			filename: "index.html",				// 设置文件名
    		})
    	]
    }

## copy-webpack-plugin ##

我们在网页中会存在很多静态资源，比如说图片，音乐，视频等等，`webpack`打包的时候这些静态资源不会进行复制过去，这个时候我们就可以使用`copy-webpack-plugin`插件来进行复制静态资源。

**安装**

`npm install copy-webpack-plugin --save-dev`

**使用**

// webpack.config.js
    
    const CopyPlugin = require('copy-webpack-plugin');
    
    module.exports = { 
    	mode: "development",
    	plugins: [
    		new HtmlWebpackPlugin({ 
    			template: "./public/index.html"
    		}),
    		new CopyWebpackPlugin({ 
    			patterns: [
    				{  from : './public', to : '/' }			// 从from复制到to
    			]
    		})
    	]
    }

[20200528170149624.png_pic_center]: https://img-blog.csdnimg.cn/20200528170149624.png#pic_center
[compilation-hooks]: https://www.webpackjs.com/api/compilation-hooks/