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

プラグインの仕組み (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