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表示打开调试