ローダーの仕組み (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]

タグ:

コメントを残す

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