webpack中如何编写一个plugin

loader和plugin有什么区别呢？什么是loader，什么是plugin。

当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候，这个时候，我们可以借助loader去帮我们处理引用的文件，这是loader的一个作用

当我们在做打包的时候，在某一些具体时刻上，比如打包结束后，我要自动生成一个html文件，这个时候就可以使用一个htmlwebpackplugin的插件， 比如在打包之前，要把dist目录清空，这个时候可以使用clearwebpackplugin。

 

首先新建一个项目plugin

npm init -y

npm install webpack webpack-cli --save-dev

新建文件夹src，index.js

 

index.js

console.log('hello world');

webpack.config.js

const path = require('path');

module.exports = {
　　mode: 'development',
　　entry: {
　　　　main: './src/index.js'
　　},
　　output: {
　　　　path: path.resolve(__dirname, 'dist'),
　　　　filename: '[name].js'
　　}
}

package.json

"scripts": {
　　"build": "webpack"
}

运行npm run build，运行完成。生成main.js。输出hello world。

 

我现在要做这样一个功能，打包完后在dist下面帮我自动生成一个版权信息的js。在根目录下新建一个文件夹叫做plugins。在新建一个js叫做copyright-webpack-plugin.js。插件的定义跟loader不一定，loader是一个函数，插件是一个类

copyright-webpack-plugin.js

class CopyrightWebpackPlugin {
　　constructor(){
　　　　console.log('插件被使用了')
　　}
　　apply(compiler) {
　　}
}
module.exports = CopyrightWebpackPlugin;

格式大概长成这个样子，所以每次定义一个插件的时候，都长这个样子。

 

接着我们要使用他，在webpack.config.js里面去使用他

const CopyRightWebpackPlugin = require('./plugins/copyright-webpack-plugin');
module.exports = {
　　plugins: [
　　　　/**
　　　　* 所以知道为什么插件要一个new，因为是一个类，用的时候需要new一下。
　　　　* new这个插件的时候，就使用了这个插件
　　　　*/
　　　　new CopyRightWebpackPlugin()
　　],
}

然后运行npm run build。发现控制台打印出了'插件被使用了'。确实使用了，但是什么没干。

这个时候在new 的时候传入参数。插件里面constructor就可以获取到了。

copyright-webpack-plugin.js

class CopyrightWebpackPlugin {
　　/**
　　* compiler是webpack的一个实例，这个实例存储了webpack各种信息，所有打包信息
　　* https://webpack.js.org/api/compiler-hooks
　　* 官网里面介绍了compiler里面有个hooks这样的概念
　　* hooks是钩子的意思，里面定义了时刻值
　　*/
　　apply(compiler) {
　　/**
　　* 用到了hooks，emit这个时刻，在输出资源之前，这里官网告诉我们是一个异步函数
　　* compilation是这一次的打包信息，所以跟compiler是不一样的
　　* tapAsync接受两个参数，第一个是名字，
　　*/
　　compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation, cb)=>{
　　　　debugger;
　　　　compilation.assets['copyright.txt'] = {
　　　　　　source: function(){
　　　　　　　　return 'copyright by q'
　　　　　　},
　　　　　　size: function() {
　　　　　　　　return 15
　　　　　　}
　　　　};
　　　　// 最后一定要调用cb
　　　　cb();
　　})
　　/**
　　* 同步的时刻跟同步的时刻写代码的方式不一样
　　* 同步的时刻，后面只要一个参数就可以了
　　*/
　　compiler.hooks.compile.tap('CopyrightWebpackPlugin',(compilation) => {
　　　　console.log('compiler');
　　})
　　}
}
module.exports = CopyrightWebpackPlugin;

然后运行，dist下就生成了一个copyright.txt。里面是copyright by q。

这里有个疑问，我怎么知道compilation有assert这样的东西，这里有个debugger。

"scripts": {
　　"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",
　　"build": "webpack"
},

运行debug，就可以对插件进行调试，能够可视化对看见compilation下所有的信息。debug跟build是同样的一个东西，只不过debug可以在里面传入参数，比如--inspect表示打开调试