ローダーの仕組み (Loader API) [Webpack]

ローダーの仕組み (Loader API)

参考：

Loader Interface | Webpack [Official]

Loader Specification · webpack/webpack Wiki – GitHub

使い方

参考：

ローダー | Webpack 1.13.0 日本語リファレンス (js STUDIO)

ローダーを自作する

参考：

webpack のローダー作ってみたら楽だった – Qiita

Webpack の loader を作る – Qiita

簡単な Webpack loader をいくつか書いて Webpack と仲良くなる | おふくろさまより愛をこめて

Extending with Loaders | SurviveJS

Writing a Loader | Webpack [Official]

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

loaders · webpack/docs Wiki – GitHub

webpack/examples/loader/README.md at v4.26.1 · webpack/webpack

コンテキスト

ローダー実行時に this に定義されるプロパティ

• this.version
• this.context
• this.rootContext
• this.request
• this.query
• this.callback
• this.async
• this.data
• this.cacheable
• this.loaders
• this.loaderIndex
• this.resource
• this.resourcePath
• this.resourceQuery
• this.target
• this.webpack
• this.sourceMap
• this.emitWarning
• this.emitError
• this.loadModule
• this.resolve
• this.addDependency
• this.addContextDependency
• this.clearDependency
• this.emitFile
• this.fs
• this.mode

廃止されたプロパティ

• this.exec
• this.resolveSync
• this.value
• this.inputValue
• this.options
• this.debug
• this.minimize
• this._compilation
• this._compiler
• this._module

参考：

The Loader Context | Webpack [Official]

Deprecated context properties | Webpack [Official]

Tips

参考：

webpack を使ってコマンドラインツールを作る – Qiita

loader-utils

参考：

webpack/loader-utils: utils for webpack loaders – GitHub

loader-utils – npm

cacheable

参考：

cacheable – Loader API | Webpack [Official]

addDependency

参考：

this.addDependency – Loader API | Webpack [Official]

Pipelined code generation in a webpack plugin – Stack Overflow

How to make sure webpack watches files importanted in a file of another programming language loaded by a loader – Stack Overflow

Webpack loader not being used when requiring file being processed by custom loader – Stack Overflow

Webpack4

参考：

migration guide for plugins / loaders | webpack

request

参考：

ローダー | Webpack 1.13.0 日本語リファレンス (js STUDIO)

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

ResolverFactory

参考：

Resolvers | Webpack [Official]

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

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

Resolver

参考：

enhanced-resolve/Resolver.js at v4.1.0 · webpack/enhanced-resolve – GitHub

chunkName

chunkName テンプレートの [request] が userRequest に置き換えられる

参考：

chunkName/Template.toPath – webpack/ContextModule.js at v4.26.1 · webpack/webpack – GitHub

Template.toPath – webpack/Template.js at v4.26.1 · webpack/webpack

loadModule

参考：

this.loadModule – Loader API | Webpack [Official]

How to resolve a require string within a custom webpack loader? · Issue #1417 · webpack/webpack – GitHub

How to resolve a require string within a custom webpack loader – Stack Overflow

NormalModuleFactory

参考：

webpack/NormalModuleFactory.js at v4.28.4 · webpack/webpack – GitHub

ContextModuleFactory

参考：

webpack/ContextModuleFactory.js at v4.28.4 · webpack/webpack – GitHub

require されてからローダーが呼ばれるまでの仕組み

+ required string
| -- resolve.loaders is prepended if no loaders specified
| resolve process
| -- resolve.postprocess
+ resolved filename
| check cache (if in watch mode)
|  reading file
|  -- preLoaders
|  loaders
|  -- postLoaders
|  parse file
|  save to cache (if in watch mode)
+ parsed source
| fork require calls
+ parsed source (requires are resolved)
| replace requires with ids
+ source fragment

参考：

Feature: Loader can change the filename of a required file · Issue #9 · webpack/webpack – GitHub

loader-runner

Webpack においてローダーを起動してコードの変換処理をさせるランナー。

参考：

webpack/loader-runner: Runs (webpack) loaders – GitHub

LoaderRunner

LoaderRunner の本体。

参考：

loader-runner/LoaderRunner.js at v3.0.0 · webpack/loader-runner – GitHub

LOADER_EXECUTION

実際にローダーが処理する関数を呼び出す。

参考：

LOADER_EXECUTION – loader-runner/LoaderRunner.js at v3.0.0 · webpack/loader-runner – GitHub

ErrorHelpers

エラー出力用のヘルパー関数を提供する。

参考：

webpack/ErrorHelpers.js at v4.31.0 · webpack/webpack – GitHub

cutOffLoaderExecution

ローダー実行時のエラー出力で、ローダーが呼ばれる以前のスタックトレースを削除する。

参考：

webpack/ErrorHelpers.js at v4.31.0 · webpack/webpack – GitHub

cutOffLoaderExecution – webpack/ModuleBuildError.js at v4.31.0 · webpack/webpack – GitHub

ModuleBuildError

モジュールビルド時のエラーを表すクラス。

参考：

webpack/ModuleBuildError.js at v4.31.0 · webpack/webpack – GitHub

process.exit

参考：

Alternative to process.exit(1) when a webpack module parse error occurs · Issue #1143 · styleguidist/react-styleguidist – GitHub

LoaderOptionsPlugin

参考：

LoaderOptionsPlugin | Webpack [Official]