今天寫(xiě)一個(gè)簡(jiǎn)單的webpack插件，來(lái)學(xué)習(xí)一下webpack插件

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)尚志免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

webpack插件機(jī)制可以使開(kāi)發(fā)者在webpack構(gòu)建過(guò)程中加入自己的行為，來(lái)針對(duì)自己項(xiàng)目中的一些需求做一些定制化

首先我們得知道一個(gè)插件是如何組成的：

1. 定義javascript命名函數(shù)
2. 給這個(gè)函數(shù)的prototype添加apply方法
3. 在這個(gè)方法內(nèi)我們可以勾入webpack暴露的鉤子，這些鉤子主要由compiler，compilation兩個(gè)對(duì)象暴露
4. 在某個(gè)需要勾入的構(gòu)建回調(diào)中加入自己的處理函數(shù)，處理需要處理的資源
5. 處理完成后調(diào)用webpack提供的回調(diào)

上面提到的 compiler和 compilation是插件開(kāi)發(fā)中用到的兩個(gè)重要對(duì)象，我理解為compiler代表整個(gè)webpack的配置對(duì)象，在webpack啟動(dòng)時(shí)就建立，compilation代表單次構(gòu)建的對(duì)象，每次文件的更改都會(huì)創(chuàng)建一個(gè)新的compilation對(duì)象，可能闡述的不是很完全，可以參照webpack官方文檔

compiler 和 compilation 這兩個(gè)對(duì)象都擴(kuò)展自Tapable類，在觸碰他們的鉤子時(shí)根據(jù)鉤子觸發(fā)的時(shí)機(jī)調(diào)用不同的方法，主要有tap，tapAsync，tapPromise三個(gè)方法，調(diào)用形式都是

compilation.hooks.someHook.tap(/* ... */);

說(shuō)了這么多，可以通過(guò)代碼加深一下印象，來(lái)加深一下插件基本的組成和使用

// webpack插件先定義一個(gè)js函數(shù)
function MyPlugin(options) {

}

// 然后在這個(gè)函數(shù)的prototype添加apply方法
MyPlugin.prototype.apply = function (compiler) {
    compiler.hooks.emit.tapAsync('MyPlugin',function(compilation, callback) {
        // 在生成文件中，創(chuàng)建一個(gè)頭部字符串：
        var filelist = 'In this build:\n\n';
    
        // 遍歷所有編譯過(guò)的資源文件，
        // 對(duì)于每個(gè)文件名稱，都添加一行內(nèi)容。
        // 在這里我們可以做一些我們想做的事情
        for (var filename in compilation.assets) {
          filelist += ('- '+ filename +'\n');
        }
    
        // 將這個(gè)列表作為一個(gè)新的文件資源，插入到 webpack 構(gòu)建中：
        compilation.assets['filelist.md'] = {
          source: function() {
            return filelist;
          },
          size: function() {
            return filelist.length;
          }
        };
    
        callback();
      });
}

module.exports = MyPlugin

const path = require('path')
const MyPlugin = require('./js/plugins/myPlugin')

module.exports = {
    entry: {
        main: './js/main',
        index:'./js/index'
    },
    output: {
        filename:'[name]-[hash].js',
        path:path.join(__dirname,'dist')
    },
    plugins:[
        new MyPlugin() //此處調(diào)用插件
    ]
}

大家有么有在項(xiàng)目中有自己寫(xiě)過(guò)webpack插件，可以探討一下????