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