プラグインの仕組み (Plugin API)

参考:

Writing a Plugin | Webpack [Official]

Plugin API | Webpack [Official]

Compiler Hooks | Webpack [Official]

Compilation Hooks | Webpack [Official]

Resolvers | Webpack [Official]

Parser | Webpack [Official]

Plugin Patterns | Webpack [Official]

how to write a plugin · webpack/docs Wiki – GitHub

plugins · webpack/docs Wiki – GitHub

list of plugins · webpack/docs Wiki – GitHub

プラグインの作り方

参考:

webpack plugin のつくりかた – Qiita

webpack plugin の作り方メモ | seihmdのブログ

Extending with Plugins | SurviveJS

How to write your first webpack plugin? – Frontend Weekly – Medium

webpack-sources

参考:

webpack/webpack-sources: Source code handling classes for webpack – GitHub

webpack-sources – npm

optimizeChunkAssets

参考:

Webpack plugin to modify files after compilation – Stack Overflow

output.path

参考:

Do not overwrite the output.path · Issue #337 · webpack/webpack-dev-server – GitHub

Compiler Hooks

compiler.hooks.someHook.tap(/* ... */)

参考:

Compiler Hooks | Webpack [Official]

Tapable

参考:

webpack/tapable: Just a little module for plugins – GitHub

Hook types

同期フック

  • SyncHook
  • SyncBailHook
  • SyncWaterfallHook

非同期フック

  • AsyncSeriesHook
  • AsyncWaterfallHook
  • AsyncSeriesBailHook
  • AsyncParallelHook

同期フックにコールバックを登録する

  • tap

非同期フックにコールバックを登録する

  • tap
  • tabAsync
  • tapPromise

参考:

Different Plugin Shapes – Writing a Plugin | Webpack [Official]

Hook types – webpack/tapable: Just a little module for plugins – GitHub

done

参考:

No way to have a callback after build completes · Issue #132 · webpack/webpack-dev-server – GitHub

invalid

参考:

invalid – Compiler Hooks | Webpack [Official]

webpack-hot-middleware/middleware.js at v2.24.3 · webpack-contrib/webpack-hot-middleware – GitHub

beforeRun/run/watchRun

参考:

beforeRun – Compiler Hooks | Webpack [Official]

run – Compiler Hooks | Webpack [Official]

watchRun – Compiler Hooks | Webpack [Official]

version

const webpack = require('webpack')
console.log(webpack.version)

参考:

How to determine the installed webpack version – Stack Overflow

webpack/webpack.js at v4.25.1 · webpack/webpack – GitHub

Webpack4

参考:

webpack 4: migration guide for plugins/loaders – webpack – Medium

compiler.plugin の廃止

emit フックの書き換え例

- compiler.plugin('emit', function (compilation, callback) {
+ compiler.hooks.emit.tapAsync('PluginName', (compilation, callback) => {

参考:

Hooks – Compiler Hooks | Webpack [Official]

Usage – webpack/tapable: Just a little module for plugins – GitHub

Compiler

参考:

webpack/Compiler.js at v4.27.0 · webpack/webpack – GitHub

Compilation

参考:

webpack/Compilation.js at v4.27.0 · webpack/webpack – GitHub

compilation.errors

compilation.errors.push(new WebpackError("Error!"))

参考:

errors – webpack/Compilation.js at v4.36.1 · webpack/webpack – GitHub

errors – webpack/Stats.js at v4.36.1 · webpack/webpack – GitHub

formatError – webpack/Stats.js at v4.36.1 · webpack/webpack – GitHub

プラグインでアセットを生成する

※ 未解決

参考:

What’s the right way to add asset from a plugin · Issue #1175 · webpack/webpack – GitHub

Webpack Virtual Modules

参考:

sysgears/webpack-virtual-modules: Webpack Virtual Modules with watch mode support – GitHub

emit virtual module inside a Plugin – Stack Overflow

Virtual Module Webpack Plugin

参考:

rmarscher/virtual-module-webpack-plugin: Adds the contents of a virtual file to webpack’s cached file system without writing it to disk – GitHub

How to dynamically add a module/dependency with a webpack plugin? – Stack Overflow

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です