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表示打開調試