言

最近由于用著html-webpack-plugin覺得很不爽，于是乎想自己動手寫一個插件。原以為像gulp插件一樣半天上手一天寫完，但令人郁悶的是完全找不到相關(guān)的文章。一進(jìn)官方文檔卻是被嚇傻了。首先是進(jìn)入how to write a plugin看了一頁簡單的介紹。然后教程會告訴你，你需要去了解compiler和compilation這兩個對象，才能更好地寫webpack的插件，然后作者給了github的鏈接給你，讓你去看源代碼，我暈。不過幸好最后給了一個plugins的API文檔，才讓我開發(fā)的過程中稍微有點(diǎn)頭緒。

how to write a plugin這個教程還是可以好好看看的，尤其是那個simple example，它會教你在compilation的emit事件或之前，將你需要生成的文件放到webpack的compilation.assets里，這樣就可以借助webpack的力量幫你生成文件，而不需要自己手動去寫fs.writeFileSync。

主要就是這段代碼

compilation.assets['filelist.md']={
      source: function {
        return filelist;
      },
      size: function {
        return filelist.length;
      }
};

基本特性介紹

首先，定義一個函數(shù)func，用戶設(shè)置的options基本就在這里處理。

其次，需要設(shè)一個func.prototype.apply函數(shù)。這個函數(shù)是提供給webpack運(yùn)行時(shí)調(diào)用的。webpack會在這里注入compiler對象。

輸出complier對象，你會看到這一長串的內(nèi)容，初步一看，我看出了兩大類（有補(bǔ)充的可以告訴我）。一個webpack運(yùn)行時(shí)的參數(shù)，例如_plugins，這些數(shù)組里的函數(shù)應(yīng)該是webpack內(nèi)置的函數(shù)，用于在compiltion，this-compilation和should-emit事件觸發(fā)時(shí)調(diào)用的。另一個是用戶寫在webpack.config.js里的參數(shù)。隱約覺得這里好多未來都可能會是webpack暴露給用戶的接口，使webpack的定制化功能更強(qiáng)大。

Compiler {
  _plugins:
   { compilation: [ [Function], [Function], [Function], [Function] ],
     'this-compilation': [ [Function: bound ] ],
     'should-emit': [ [Function] ] },
  outputPath: '',
  outputFileSystem: null,
  inputFileSystem: null,
  recordsInputPath: null,
  recordsOutputPath: null,
  records: {},
  fileTimestamps: {},
  contextTimestamps: {},
  resolvers:
   { normal: Tapable { _plugins: {}, fileSystem: null },
     loader: Tapable { _plugins: {}, fileSystem: null },
     context: Tapable { _plugins: {}, fileSystem: null } },
  parser:
   Parser {
     _plugins:
      { 'evaluate Literal': [Object],
        'evaluate LogicalExpression': [Object],
        'evaluate BinaryExpression': [Object],
        'evaluate UnaryExpression': [Object],
        'evaluate typeof undefined': [Object],
        'evaluate Identifier': [Object],
        'evaluate MemberExpression': [Object],
        'evaluate CallExpression': [Object],
        'evaluate CallExpression .replace': [Object],
        'evaluate CallExpression .substr': [Object],
        'evaluate CallExpression .substring': [Object],
        'evaluate CallExpression .split': [Object],
        'evaluate ConditionalExpression': [Object],
        'evaluate ArrayExpression': [Object],
        'expression Spinner': [Object],
        'expression ScreenMod': [Object] },
     options: undefined },
  options:
   { entry:
      { 
        'index': '/Users/mac/web/src/page/index/main.js' },
     output:
      { publicPath: '/homework/features/model/',
        path: '/Users/mac/web/dist',
        filename: 'js/[name].js',
        libraryTarget: 'var',
        sourceMapFilename: '[file].map[query]',
        hotUpdateChunkFilename: '[id].[hash].hot-update.js',
        hotUpdateMainFilename: '[hash].hot-update.json',
        crossOriginLoading: false,
        hashFunction: 'md5',
        hashDigest: 'hex',
        hashDigestLength: 20,
        sourcePrefix: '\t',
        devtoolLineToLine: false },
     externals: { react: 'React' },
     module:
      { loaders: [Object],
        unknownContextRequest: '.',
        unknownContextRecursive: true,
        unknownContextRegExp: /^\.\/.*$/,
        unknownContextCritical: true,
        exprContextRequest: '.',
        exprContextRegExp: /^\.\/.*$/,
        exprContextRecursive: true,
        exprContextCritical: true,
        wrappedContextRegExp: /.*/,
        wrappedContextRecursive: true,
        wrappedContextCritical: false },
     resolve:
      { extensions: [Object],
        alias: [Object],
        fastUnsafe: ,
        packageAlias: 'browser',
        modulesDirectories: [Object],
        packageMains: [Object] },
     plugins:
      [ [Object],
        [Object],
        [Object],
        [Object],
        NoErrorsPlugin {},
        [Object],
        [Object] ],
     devServer: { port: 8081, contentBase: './dist' },
     context: '/Users/mac/web/',
     watch: true,
     debug: false,
     devtool: false,
     cache: true,
     target: 'web',
     node:
      { console: false,
        process: true,
        global: true,
        setImmediate: true,
        __filename: 'mock',
        __dirname: 'mock' },
     resolveLoader:
      { fastUnsafe: ,
        alias: {},
        modulesDirectories: [Object],
        packageMains: [Object],
        extensions: [Object],
        moduleTemplates: [Object] },
     optimize: { occurenceOrderPreferEntry: true } },
  context: '/Users/mac/web/' }

除此以外，compiler還有一些如run, watch-run的方法以及compilation, normal-module-factory對象。我目前用到的，主要是compilation。其它的等下一篇有機(jī)會再說。

對比起compiler還有compiler.plugin函數(shù)。這個相當(dāng)于是插件可以進(jìn)行處理的webpack的運(yùn)行中的一些任務(wù)點(diǎn)，webpack就是完成一個又一個任務(wù)而完成整個打包構(gòu)建過程的。如make是最開始的起點(diǎn), complie就是編譯任務(wù)點(diǎn)，after-complie是編譯完成，emit是即將準(zhǔn)備生成文件，after-emit是生成文件之后等等，前面幾個都是比較生動形象的任務(wù)點(diǎn)。

至于compilation，它繼承于compiler，所以能拿到一切compiler的內(nèi)容（所以你也會看到webpack的options），而且也有plugin函數(shù)來接入任務(wù)點(diǎn)。在compiler.plugin('emit')任務(wù)點(diǎn)輸出compilation，會得到大致下面的對象數(shù)據(jù)，因?yàn)閷?shí)在太長，我只保留了最重要的assets部份：

assetsCompilation {
  assets:
   { 'js/index/main.js':
      CachedSource {
        _source: [Object],
        _cachedSource: undefined,
        _cachedSize: undefined,
        _cachedMaps: {} } },
  errors: ,
  warnings: ,
  children: ,
  dependencyFactories:
   ArrayMap {
     keys:
      [ [Object],
        [Function: MultiEntryDependency],
        [Function: SingleEntryDependency],
        [Function: LoaderDependency],
        [Object],
        [Function: ContextElementDependency],
     values:
      [ NullFactory {},
        [Object],
        NullFactory {} ] },
  dependencyTemplates:
   ArrayMap {
     keys:
      [ [Object],
        [Object],
        [Object] ],
     values:
      [ ConstDependencyTemplate {},
        RequireIncludeDependencyTemplate {},
        NullDependencyTemplate {},
        RequireEnsureDependencyTemplate {},
        ModuleDependencyTemplateAsRequireId {},
        AMDRequireDependencyTemplate {},
        ModuleDependencyTemplateAsRequireId {},
        AMDRequireArrayDependencyTemplate {},
        ContextDependencyTemplateAsRequireCall {},
        AMDRequireDependencyTemplate {},
        LocalModuleDependencyTemplate {},
        ModuleDependencyTemplateAsId {},
        ContextDependencyTemplateAsRequireCall {},
        ModuleDependencyTemplateAsId {},
        ContextDependencyTemplateAsId {},
        RequireResolveHeaderDependencyTemplate {},
        RequireHeaderDependencyTemplate {} ] },
  fileTimestamps: {},
  contextTimestamps: {},
  name: undefined,
  _currentPluginApply: undefined,
  fullHash: 'f4030c2aeb811dd6c345ea11a92f4f57',
  hash: 'f4030c2aeb811dd6c345',
  fileDependencies: [ '/Users/mac/web/src/js/index/main.js' ],
  contextDependencies: ,
  missingDependencies:  }

assets部份重要是因?yàn)槿绻阆虢柚鷚ebpack幫你生成文件，你需要像官方教程how to write a plugin在assets上寫上對應(yīng)的文件信息。

除此以外，compilation.getStats這個函數(shù)也相當(dāng)重要，能得到生產(chǎn)文件以及chunkhash的一些信息，如下：

assets{ errors: ,
  warnings: ,
  version: '1.12.9',
  hash: '5a5c71cb2accb8970bc3',
  publicPath: 'xxxxxxxxxx',
  assetsByChunkName: { 'index/main': 'js/index/index-4c0c16.js' },
  assets:
   [ { name: 'js/index/index-4c0c16.js',
       size: 453,
       chunks: [Object],
       chunkNames: [Object],
       emitted: undefined } ],
  chunks:
   [ { id: 0,
       rendered: true,
       initial: true,
       entry: true,
       extraAsync: false,
       size: 221,
       names: [Object],
       files: [Object],
       hash: '4c0c16e8af4d497b90ad',
       parents: ,
       origins: [Object] } ],
  modules:
   [ { id: 0,
       identifier: 'multi index/main',
       name: 'multi index/main',
       index: 0,
       index2: 1,
       size: 28,
       cacheable: true,
       built: true,
       optional: false,
       prefetched: false,
       chunks: [Object],
       assets: ,
       issuer: null,
       profile: undefined,
       failed: false,
       errors: 0,
       warnings: 0,
       reasons:  },
     { id: 1,
       identifier: '/Users/mac/web/node_modules/babel-loader/index.js?presets=es2015&presets=react!/Users/mac/web/src/js/main/index.js',
       name: './src/js/index/main.js',
       index: 1,
       index2: 0,
       size: 193,
       cacheable: true,
       built: true,
       optional: false,
       prefetched: false,
       chunks: [Object],
       assets: ,
       issuer: 'multi index/main',
       profile: undefined,
       failed: false,
       errors: 0,
       warnings: 0,
       reasons: [Object],
       source: ''  // 具體文件內(nèi)容}
 ],
  filteredModules: 0,
  children:  }

這里的chunks數(shù)組里，是對應(yīng)會生成的文件，以及md5之后的文件名和路徑，里面還有文件對應(yīng)的chunkhash（每個文件不同，但如果你使用ExtractTextPlugin將css文件獨(dú)立出來的話，它會與require它的js入口文件共享相同的chunkhash），而assets.hash則是統(tǒng)一的hash，對每個文件都一樣。值得關(guān)注的是chunks里的每個文件，都有source這一項(xiàng)目，提供給開發(fā)者直接拿到源文件內(nèi)容（主要是js，如果是css且使用ExtractTextPlugin，則請自行打印出來參考）。

例子

接下來，會以最近我寫的一個插件html-res-webpack-plugin作為引子，來介紹基本的寫插件原理。插件的邏輯就寫在index.js里。

首先，將用戶輸入的參數(shù)在定好的函數(shù)中處理，HtmlResWebpackPlugin。

然后，新增apply函數(shù)，在里面寫好插件需要切入的webpack任務(wù)點(diǎn)。目前HtmlResWebpackPlugin插件只用到emit這個任務(wù)點(diǎn)，其它幾個僅作為演示。

第三步，調(diào)用addFileToWebpackAsset方法，寫compilation.assets，借助webpack生成html文件。

第四步，在開發(fā)模式下(isWatch=true)，直接生成html，但在生產(chǎn)模式下(isWatch=true），插件會開始對靜態(tài)資源（js，css）進(jìn)行md5或者內(nèi)聯(lián)。

第五步，調(diào)用findAssets方法是為了通過compilation.getStats拿到的數(shù)據(jù)，去匹配對應(yīng)的靜態(tài)資源，還有找到對應(yīng)的哈希(是chunkhash還是hash)。

最六步，調(diào)用addAssets方法，對靜態(tài)資源分別做內(nèi)聯(lián)或者md5文件處理。內(nèi)聯(lián)資源的函數(shù)是inlineRes,你會看到我使用了compilation.assets[hashFile].source 及 compilation.assets[hashFile].children[1]._value。前者是針對于js的，后者是針對使用了ExtractTextPlugin的css資源。

最后一步，即是內(nèi)聯(lián)和md5完成后，再更新一下compilation.assets中對應(yīng)生成html的source內(nèi)容，才能正確地生成內(nèi)聯(lián)和md5后的內(nèi)容。

后記

有興趣可以試用一下html-res-webpack-plugin這個插件（為什么要寫一個新的html生成插件，我在readme里寫了，此處不贅述），看看有哪些用得不爽之處。目前只是第一版，還不適合用于生產(chǎn)環(huán)境。希望第二版的時(shí)候能適用于更多的場景，以及性能更好。到是，我也會寫第二篇插件開發(fā)文章，將本文還沒提到的地方一一補(bǔ)充完整。也歡迎大家在這里發(fā)貼，或者指出本人的謬誤之處。