設定

このサイトは作成途中のものを公開しています。 また、Webpackのバージョンが1.13.0の頃に作成されたものですが、2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。

webpackは設定オブジェクトを読み取ります。 開発者の都合に合わせて、この設定オブジェクトを渡す方法が2つ存在します。

CLI

CLIを使用する場合、webpack.config.jsファイル(または、--configオプションで指定されたファイル)を読み取ります。 このファイルは、設定オブジェクトをexportする必要があります。

module.exports = {
    // 設定
};

node.js API

node.js APIを使用する場合は、パラメーターとして設定オブジェクトを渡す必要があります。

webpack({
    // 設定
}, callback);

複数の設定

どちらのケースでも、並列に処理させるように設定の配列を使用することが可能です。 これらは、ファイルシステムのキャッシュと監視を共有するため、何度もwebpackを呼び出すより効率的です。

設定オブジェクトの詳細

ヒント: 設定に純粋なJSONを書く必要がないことを覚えておいてください。 あくまでnode.jsのモジュールなので、必要なJavaScriptを使用してください。

下記は、非常にシンプルな設定オブジェクトの例になります。

{
    context: __dirname + "/app",
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}

context

entryオプションでの基準となるディレクトリ(絶対パス)を指定します。 もし、output.pathinfoが設定されている場合は、このディレクトリの情報は省略されます。

デフォルト値は、process.cwd()(カレント・ワーキング・ディレクトリ - 現在の作業ディレクトリ)

entry

バンドルするのためのエントリー・ポイント(例えば、<head>内で参照されて、実行が開始される処理の部分)を指定します。

文字列が渡された場合は、起動時に読み込まれるモジュールの解決に使用されます。

配列が指定された場合は、起動時にそれら全てのモジュールが読み込まれ、最後の1つがexportされます。

entry: ["./entry1", "./entry2"]

オブジェクトが渡された場合は、複数のエントリー・バンドルが作成されます。 キーはチャンク名で、値には文字列または配列をを指定します。

{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        //複数のエントリ・ポイントを使用する際は、
        //output.filenameに[name]または[id]を使用してください。
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }
}

注意: エントリー・ポイントに他のオプションを個別に設定することは出来ません。 もし、それが必要なのであれば、複数設定を使用する必要があります。

output

コンパイルの出力に関するオプションです。 outputオプションは、コンパイルをディスクにどのように書き出すのかをwebpackに伝えます。 また、エントリ・ポイントは複数あっても、outputの設定は1つだけになるので注意して下さい。

ハッシュ化([hash]または[chunkhash])を使用する場合は、 モジュールの順序に一貫性があることを確認してください。 OccurrenceOrderPluginまたはrecordsPathを使用してください。

単一のエントリー

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: './built'
  }
}
// ./built/bundle.js に出力されます。

複数のエントリー

複数の"チャンク"の作成を設定している(複数のエントリー・ポイントの指定、またはCommonsChunkPluginのようなプラグインを使用)場合、 各ファイルが一意の名前になるように、下記の置換指定(substitutions)を使用する必要があります。

[name]
チャンク名で置換します。
[hash]
コンパイルのハッシュで置換します。
[chunkhash]
チャンクのハッシュで置換します。
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/built'
  }
}

// ./built/app.js、./built/search.js が出力されます。

output.path

絶対パスで出力するディレクトリを指定します。(必須)

[hash]は、コンパイルのハッシュに置換されます。

output.publicPath

publicPathは、ブラウザで参照される際の出力ファイルの(publicの)URLアドレスを表します。

<script><link>タグに埋め込まれるローダー、または画像のような参照されるアセットのために、 publicPathは、それらがディスクの場所(pathで指定される)と異なる際に、 hrefurl()でのファイル指定のために使用されます。 これは、出力ファイルの一部または全てを異なるドメインやCDN上にホストしたいような場合に便利です。 Webpack Dev Serverも、出力ファイルが何処から提供されているのかを判断するためにこれを使用します。

pathと同様に、キャッシング・プロファイルを向上させるために、 [hash]の置換指定(substitution)を使用することが出来ます。

index.html

<head>
  <link href="/assets/spinner.gif"/>
</head>

config.js

output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}

下記は、アセットのためのCDNとハッシュを使用した、より複雑な例になります。

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

注意: コンパイル時に最終的な出力ファイルのpublicPathが判明しないケースでは、 それは空白のままにされ、エントリー・ポイントのファイル内でランタイム時に動的に設定される可能性があります。 コンパイル中にpublicPathが判明しない場合これを省略し、 エントリー・ポイントで__webpack_public_path__を設定することが可能です。

 __webpack_public_path__ = myRuntimePublicPath

// 以下、アプリケーションのエントリー処理が続く...

output.chunkFilename

output.pathディレクトリ内での、エントリーでは無いチャンクの相対パスとしてのファイル名です。

[id]
チャンクのidに置き換わります。
[name]
チャンク名に置き換わります。(チャンク名が無ければ、id)
[hash]
コンパイルのハッシュ文字列に置き換わります。
[chunkhash]
チャンクのハッシュ文字列に置き換わります。

output.sourceMapFilename

JavaScript用のソースマップのファイル名です。 これらは、output.pathのディレクトリ内にあります。

[file]
JavaScriptファイルのファイル名に置き換わります。
[id]
チャンクのidに置き換わります。
[hash]
コンパイルのハッシュ文字列に置き換わります。

デフォルトは、"[file].map"です。

output.devtoolModuleFilenameTemplate

生成されたソースマップ内のsources配列のための関数のファイル名のテンプレート文字列です。

[resource]
Webpackがファイルを解決するのに使用するパスで置き換えられます。 ローダーの右端にクエリー・パラメーターがあれば、それも含まれます。
[resource-path]
[resource]と同じですが、クエリー・パラメーターが含まれません。
[loaders]
[loaders] is the list of loaders and params up to the name of the rightmost loader (only explict loaders).
[all-loaders]
[all-loaders] is the list of loaders and params up to the name of the rightmost loader (including automatic loaders).
[id]
モジュールのidに置き換わります。
[hash]
モジュール識別子のハッシュに置き換わります。
[absolute-resource-path]
絶対ファイル名に置き換わります。
形式 デフォルト値
devtool=[inline-]source-map "webpack:///[resource-path]"
devtool=eval "webpack:///[resource-path]?[loaders]"
devtool=eval-source-map "webpack:///[resource-path]?[hash]"

文字列テンプレートの代わりに、関数として定義することも可能です。 関数は下記のプロパティを持つinfoオブジェクトのパラメーターを受け付けます。

  • identifier
  • shortIdentifier
  • resource
  • resourcePath
  • absoluteResourcePath
  • allLoaders
  • query
  • moduleId
  • hash

output.devtoolFallbackModuleFilenameTemplate

output.devtoolModuleFilenameTemplateと似ていますが、モジュールの識別子が重複するケースで使用されます。

デフォルトは、"webpack:///[resourcePath]?[hash]"です。

output.devtoolLineToLine

全ての、または特定のモジュールの行間(line to line)マッピングモードを有効にします。 行間マッピングモードは、生成されたソースの拡張を、オリジナルのソースの同じ行とマッピングする単純なソースマップを使用します。 これはパフォーマンスを最適化します。 パフォーマンスを向上させる必要があり、生成されたソース行と確実に一致させる必要がある場合にのみ、この方法を使用します。

trueを指定すると、全てのモジュールで有効になります。(非推奨)

module.loadersのようにオブジェクトの{test, include, exclude}を指定して、 特定のファイルだけを有効にすることが可能です。

デフォルトは、Disabled(無効)です。

output.hotUpdateChunkFilename

Hot Update Chunksのファイル名を指定します。 output.pathディレクトリ内に格納されます。

[id]
チャンクのidに置き換わります。
[hash]
コンパイルのハッシュに置き換わります。 (最後のハッシュがrecordに格納されます。)

デフォルトは、"[id].[hash].hot-update.js"です。

output.hotUpdateMainFilename

Hot更新の主となるファイル名を指定します。 これは、output.pathディレクトリ内に格納されます。

[hash]はコンパイルのハッシュに置き換えられます。(最後のハッシュがrecordに格納されます。)

デフォルトは、[hash].hot-update.json"です。

output.jsonpFunction

webpackによってチャンクの非同期読み込みに使用されるJSONP関数を指定します。

短い関数であれば、ファイルサイズを少し減らせるかもしれません。 単一のページで複数のwebpackインスタンスを持つ場合は、異なる識別子を使用してください。

デフォルトは、"webpackJsonp"です。

output.hotUpdateFunction

webpackによってチャンクのHot更新の非同期の読み込みで使用されるJSONP関数を指定します。

デフォルトは、"webpackHotUpdate"です。

output.pathinfo

コメントに含まれるモジュールについての情報です。

//例:
require(/* ./test */23)

製品版には使用しないで下さい。

デフォルトは、falseです。

output.library

設定すると、ライブラリとしてバンドルをexportします。 output.libraryにその名前を指定します。

ライブラリを書き、それを単一のファイルとして公開したい場合に、これを使用してください。

output.libraryTarget

ライブラリのexportのフォーマットを指定します。

"var"
変数を設定することでexportします。(デフォルト)
var Library = xxx
"this"
thisのプロパティを設定することでexportします。
this["Library"] = xxx
"commonjs"
exportsのプロパティに設定することでexportします。
exports["Library"] = xxx
"commonjs2"
module.exportsに設定することでexportします。
module.exports = xxx
"amd"
AMDをexportします。(ライブラリのオプションを介して、名前を設定可能です。)
"umd"
AMD、CommonJS2、またはrootのプロパティとしてexportします。

デフォルトは、"var"です。

output.libraryが設定されていないのに、 output.libraryTargetvar以外の値で設定されていた場合、 exportされるオブジェクトの各プロパティはコピーされます。(amd,commonjs2,umdは除く。)

output.umdNamedDefine

output.libraryTargetumdを設定し、output.libraryが設定されている場合、 これにtrueを設定することで、AMDモジュールに名前を付けます。

output.sourcePrefix

バンドル内のソースの各行に、この文字列をプリフィックスとして付けます。

デフォルトは、"\t"です。

output.crossOriginLoading

このオプションは、チャンクのcross-originの読み込みを有効にします。 設定可能な値は下記のとおりです。

false
cross-originの読み込みを無効にします。
"anonymous"
cross-originの読み込みを有効にします。 anonymousを使用すると、証明書無しでリクエストが送られます。
"use-credentials"
cross-originの読み込みを有効にし、証明書がリクエストで送られます。

cross-originの読み込みの情報については、MDNを参照してください。

デフォルトはfalseです。

module

標準モジュール(NormalModuleFactory)に対して作用するオプションになります。

module.loaders

自動的に適用するローダーを配列で指定します。 各項目は、下記のプロパティを持つことが出来ます。

test
満たさなければいけない「条件」を指定します。
exclude
除外(満たしてはいけない)する「条件」を指定します。
include
ローダーによって変換されてimportされるファイルのパスまたはファイル名を配列で指定します。
loader
"!"文字列はローダーを区切ります。
loaders
ローダーを文字列の配列で指定します。

「条件」は下記のいずれかの方法で指定することが可能です。

  • 正規表現(絶対パスに対するRegExpのtestメソッド)
  • 絶対パスを含む文字列
  • function(absPath):bool(引数で絶対パスを取り、戻り値が真偽値の関数)
  • "且つ(and)"で連結した、これらのうちの1つの配列

詳細については、ローダーを参照してください。

重要: ここでのローダーは、それらが適用されるリソースへの相対で、パスが解決されます。 これは設定ファイルの相対で、パスが解決されるわけでは無いことを意味します。

もしローダーをnpmからインストールし、node_modulesフォルダが全てのリソースの親フォルダ内に無い場合、 webpackはローダーを見つけることが出来ません。

この場合は、node_modulesフォルダの絶対パスを、resolveLoader.rootオプションへ追加する必要があります。

resolveLoader: { root: path.join(__dirname, "node_modules") }
//例: 
module: {
  loaders: [
    {
      // "test"は一般的にファイル拡張子の一致に使用されます。
      test: /\.jsx$/,

      // "include"は一般的にディレクトリへの一致に使用されます。
      include: [
        path.resolve(__dirname, "app/src"),
        path.resolve(__dirname, "app/test")
      ],

      // "exclude"は例外的なものを取り除くのに使用されるべきです。
      // 可能なかぎり"include"を使用することをお薦めします。

      // "loader"
      loader: "babel-loader"
    }
  ]
}

module.preLoaders, module.postLoaders

module.loadersの指定と同じように指定します。

preとpostのローダー用の配列にそれぞれ適用します。

module.noParse

正規表現、または正規表現の配列を指定します。 解析(parse)を行わないファイルに対してのマッチングになります。

A RegExp or an array of RegExps. Don’t parse files matching.

これは完全に解決されたリクエストに対して一致します。

It’s matched against the full resolved request.

大規模なライブラリを無視することで、パフォーマンスを向上させることが出来ます。

This can boost the performance when ignoring big libraries.

これらのファイルは、requiredefineの類の呼び出を持たないことが求められます。

The files are expected to have no call to require, define or similar.

exportsmodule.exportsは使用することが出来ます。

They are allowed to use exports and module.exports.

module.xxxContextXxx(自動的にデフォルトのコンテキストを生成)

自動的に作成されるコンテキストのために、デフォルトを設定するための複数のオプションが存在します。 我々は自動的に作成されるコンテキストを3つの種類に分類しています。

  • exprContext: 依存性としての式(require(expr))
  • wrappedContext: 式と接頭辞(と/または)接尾辞の文字列(require("./templates/" + expr))
  • unknownContext: 他の解析出来ないrequireの使用(require)

Four options are possible for automatically created contexts:

  • request: コンテキストのリクエスト The request for context.
  • recursive: Subdirectories should be traversed.
  • regExp: The RegExp for the expression.
  • critical: This type of dependency should be consider as critical (emits a warning).

All options and defaults:

注意: module.wrappedContextRegExpは Note: module.wrappedContextRegExp only refers to the middle part of the full RegExp. The remaining is generated from prefix and surfix.

//例:
{
  module: {
    // Disable handling of unknown requires
    // 未知のrequireの扱いを無効化
    unknownContextRegExp: /$^/,
    unknownContextCritical: false,

    // Disable handling of requires with a single expression
    // 単一式によるrequireの扱いを無効化
    exprContextRegExp: /$^/,
    exprContextCritical: false,

    // Warn for every expression in require
    // requireの各式で警告
    wrappedContextCritical: true
  }
}

resolve

モジュールの解決に影響するオプションです。

resolve.alias

別のモジュールまたはパスでモジュールを置き換えます。

モジュールの名前で始まるキーを持つオブジェクトを指定します。 値には新しいパスを指定します。 単なる置換のようですが、少しだけ賢いことが出来ます。 キーの最後に$を指定することで、厳密な一致($を除く)による置換が行われます。

値が相対パスの場合、requireが含まれるファイルの相対として処理されます。

例: それぞれ異なるエイリアスの設定をして、/abc/entry.jsからrequireを呼び出すと次のようになります。

alias: require("xyz") require("xyz/file.js")
{} /abc/node_modules/xyz/index.js /abc/node_modules/xyz/file.js
{ xyz: "/absolute/path/to/file.js" } /absolute/path/to/file.js /abc/node_modules/xyz/file.js
{ xyz$: "/absolute/path/to/file.js" } /absolute/path/to/file.js error
{ xyz: "./dir/file.js" } /abc/dir/file.js /abc/node_modules/xyz/file.js
{ xyz$: "./dir/file.js" } /abc/dir/file.js error
{ xyz: "/some/dir" } /some/dir/index.js /some/dir/file.js
{ xyz$: "/some/dir" } /some/dir/index.js /abc/node_modules/xyz/file.js
{ xyz: "./dir" } /abc/dir/index.js /abc/dir/file.js
{ xyz: "modu" } /abc/node_modules/modu/index.js /abc/node_modules/modu/file.js
{ xyz$: "modu" } /abc/node_modules/modu/index.js /abc/node_modules/xyz/file.js
{ xyz: "modu/some/file.js" } /abc/node_modules/modu/some/file.js error
{ xyz: "modu/dir" } /abc/node_modules/modu/dir/index.js /abc/node_modules/dir/file.js
{ xyz: "xyz/dir" } /abc/node_modules/xyz/dir/index.js /abc/node_modules/xyz/dir/file.js
{ xyz$: "xyz/dir" } /abc/node_modules/xyz/dir/index.js /abc/node_modules/xyz/file.js

もしindex.jspackage.json内で定義されている場合、別のファイルとして解決されるかもしれません。

/abc/node_modulesも、/node_modules内として解決されるかもしれません。

resolve.root

あなたのモジュールを含むディレクトリ(絶対パス)を指定します。 ディレクトリの配列を指定することも可能です。 この設定は、検索パスのための特定のディレクトリが追加されるのに使用されるべきです。

これは絶対パスでなければいけません! ./app/modulesのような設定を渡さないでください。

//例: path.resolveによって絶対パスに変換
var path = require('path');

// ...
resolve: {
  root: [
    path.resolve('./app/modules'),
    path.resolve('./vendor/modules')
  ]
}

resolve.modulesDirectories

モジュールを探すためのディレクトリ名の配列を指定します。 現在のディレクトリだけで無くその祖先も含めてパスを解決します。 この機能はnodeの"node_modules"ディレクトリを見つける方法に似ています。 例えば、値が["mydir"]の場合、webpackは"./mydir"、"../mydir"、"../../myidr"…を探しにいきます。

デフォルト: ["web_modules", "node_modules"]

注意: "../someDir"、"app"、"."や絶対パスは、ここでは必須とはされません。 パスでは無く、ディレクトリ名を指定してください。 そうでなければ、代わりにresolve.rootオプションを使用するのが良いかもしれません。

resolve.fallback

webpackがresolve.rootまたはresolve.modulesDirectoriesでモジュールを見つけられ無かった際に、 探すべきディレクトリ(または、ディレクトリの絶対パスの配列)を指定します。

resolve.extensions

モジュールの解決に使用される拡張子の配列を指定します。 例えば、CoffeeScriptファイルを見つけるようにするためには、配列に".coffee"の文字列を含める必要があるでしょう。

デフォルト: ["", ".webpack.js", ".web.js", ".js"]

重要:
このオプションの設定はデフォルトの設定を上書きします。 これは、webpackがデフォルトで指定されている拡張子を使用してモジュールの解決を行わなくなることを意味します。

もし、モジュールがそれらの拡張子付き(例: require('./somefile.ext'))で厳密に解決されて欲しいのであれば、 配列に空文字列を含めなければいけません。

これに類似して、モジュールが拡張子無し(例: require('underscore'))で、".js"拡張子付きのファイルとして解決されて欲しいのであれば、 配列に".js"を含めなければいけません。

resolve.packageMains

適切なファイルを処理するために、package.json内でチェックするフィールドを指定します。

デフォルト: ["webpack", "browser", "web", "browserify", ["jam", "main"], "main"]

resolve.packageAlias

オブジェクトのために、package.jsonのこのフィールドがチェックされます。 キー・バリュー(値)のペアが、この指定(spec)に従ってエイリアス化されスレッドにされます。(翻訳に自信なし)

デフォルトは設定されていません。

resolve.unsafeCache

ファイルの一部の解決において、意欲的ですが安全ではないキャッシュを有効化します。 キャッシュされたパスの変更は、(稀に)故障の原因になることがあります。 正規表現(RegExp)の配列、正規表現、またはtrue(全てのファイル)が指定可能です。 パスが条件に一致すると、それがキャッシュされます。

デフォルト: []

resolveLoader

resolveに似ていますが、これはローダーに対するものです。

// デフォルト:
{
    modulesDirectories: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
    extensions: ["", ".webpack-loader.js", ".web-loader.js", ".loader.js", ".js"],
    packageMains: ["webpackLoader", "webLoader", "loader", "main"]
}

resolvealiasやその他のお馴染みの機能がここで使用できることに、注意してください。 例えば、{ txt: 'raw-loader' }txt!templates/demo.txtraw-loaderを使用させるようにします。

resolveLoader.moduleTemplates

これはresolveLoaderのみのプロパティです。

これは使用を試みるモジュールの名前の代替案を示すものです。

デフォルト: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

externals

webpackによって解決されるべき依存性ではないが、バンドル結果には依存される依存性を指定します。 この種類の依存性は、output.libraryTargetに依存します。

オブジェクトの値、文字列、関数、正規表現(RegExp)、配列が指定可能です。

文字列
正確に一致する依存性の名前を指定します。 同じ文字列が外部の依存性の解決に使用されます。
オブジェクト

オブジェクトのプロパティが正確に依存性に一致する場合に、そのプロパティの値が依存性の解決に使用されます。 プロパティの値は、接頭辞が付く形式(type)と空白で区切られる依存性が含まれるかもしれません。

プロパティの値がtrueの場合は、そのプロパティ名が代わりに使用されます。 もしプロパティの値がfalseの場合は、外部への依存性の解決がされません。 後述する例を参照してください。

関数
function(context, request, callback(err, result))
各依存性で呼び出される関数です。 The function is called on each dependency. resultがcallback関数に渡された場合、この値はオブジェクトのプロパティ値のように扱われます。( If a result is passed to the callback function this value is handled like a property value of an object (above bullet point).
正規表現(RegExp)

正規表現にマッチする各依存性が外部依存になります。 マッチするテキストが、外部依存のリクエストとして使用されます。

このリクエストは外部コードのフックを生成するのに使用される正確なコードであるため、 もしcommonjsパッケージ(例: '../some/package.js')に一致させているのであれば、 外部依存性の解決には代わりに関数を使用してください。 Because the request is the exact code used to generate the external code hook, if you are matching a commonjs package (e.g. ‘../some/package.js’), instead use the function external strategy.

callback(null, "require('" + request + "')"を通してパッケージをimportすることが可能です。 これはwebpackコンテキスト外のrequireを使用するmodule.exports = require('../some/package.js');を生成します。

配列
スキーム(scheme)の複数の値(再帰的)を指定します。
//例:
{
  output: { libraryTarget: "commonjs" },
  externals: [
    {
      a: false,      // aは外部依存ではありません。
      b: true,       // bは外部依存です。    (require("b"))
      "./c": "c",    // "./c"は外部依存です。(require("c"))
      "./d": "var d" // "./d"は外部依存です。(d)
    },

    // 相対指定の無いモジュールは外部依存です。
    // abc -> require("abc")
    /^[a-z\-0-9]+$/,

    function(context, request, callback) {
      // "global-"を接頭辞に持つ各モジュールは外部依存になります。
      // "global-abc" -> abc
      if(/^global-/.test(request)){
        return callback(null, "var " + request.substr(7));
      }
      callback();
    },

    // "./e"は外部依存です。(require("./e"))
    "./e"
  ]
}
type 出力されるimportコード
"var" "abc" module.exports = abc;
"var" "abc.def" module.exports = abc.def;
"this" "abc" (function() { module.exports = this["abc"]; }());
"this" ["abc", "def"] (function() { module.exports = this["abc"]["def"]; }());
"commonjs" "abc" module.exports = require("abc");
"commonjs" ["abc", "def"] module.exports = require("abc").def;
"amd" "abc" define(["abc"], function(X) { module.exports = X; })
"umd" "abc" everything above

amd/umdを対象としないコンパイルで、amdまたはumdを外部の値として強制すると不具合が発生するでしょう。

注意:
umdを使用している場合、importの各種類で異なる値を設定するために、 プロパティ名がcommonjscommonjs2amdrootの外部解決の値を持つオブジェクトを指定することが可能です。

target

"web"
ブラウザのような環境で使用するためのコンパイル(デフォルト)
"webworker"
WebWorkerとしてコンパイル
"node"
node.jsのような環境で使用するためのコンパイル(チャンクの読み込みにrequireを使用)
"async-node"
node.jsのような環境で使用するためのコンパイル(チャンクの非同期読み込みにjsvmを使用)
"node-webkit"
webkitで使用するためのコンパイルを行い、チャンクの読み込みにjsonを使用しますが、 組み込みのnode.jsモジュールとrequire(“nw.gui”)(実験的)もサポートします。
"electron"
Electron、Electron固有のモジュールのrequireをサポートに使用するためのコンパイルを行います。
"electron-renderer"

electron renderer processのためのコンパイルを行います。 ブラウザ環境には、JsonpTemplatePluginFunctionModulePluginを使用したtargetを、 commonjsには、NodeTargetPluginExternalsPluginを使用したtargetを、 そしてelectronの組み込みのモジュールを提供します。

注意: webpack >= 1.12.15が必要

bail

最初のエラーを黙認せずに、ハードエラーとして報告します。

profile

各モジュールのタイミング情報をキャプチャします。

ヒント: 視覚化するには、解析ツールを使用してください。 --jsonまたはstats.toJson()を指定するとJSONとして取得します。

cache

増加するビルドに対処するために、パフォーマンスを向上させるために生成されたモジュールとチャンクをキャッシュします。

これは監視(watch)モードではデフォルトで有効になります。 falseを渡すことで無効にすることができます。

オブジェクトを渡すことでこれを有効にし、それをキャッシュとしてwebpackに使用させることが可能です。 この方法で、複数のコンパイラの呼び出しでキャッシュオブジェクトを共有することが可能です。 注意: 異なるオプションでの呼び出しでは、キャッシュは共有しないでください。

debug

ローダーをデバッグモードに切り替えます。

devtool

デバッグ処理を拡張するためのデベロッパーツールを選択します。

eval
eval//@ sourceURLを使用して、各モジュールが実行されます。
source-map
ソースマップが発行されます。 output.sourceMapFilenameも参照してください。
hidden-source-map
source-mapと同じですが、バンドルへ参照用のコメントを追加しません。
inline-source-map
DataUrlとしてJavaScriptファイルにソースマップを追加します。
eval-source-map
各モジュールがevalで実行され、ソースマップはDataUrlとしてevalに追加されます。
cheap-source-map
カラム・マッピングの無いソースマップです。 ローダーからのソースマップは使用されません。
cheap-module-source-map
カラム・マッピングの無いソースマップです。 ローダーからのソースマップは、行毎の単一マッピングに簡略化されます。

@##@を接頭辞として用いると、pragma(プラグマ)スタイルを強制させます。 (デフォルトはwebpack@1@と、webpack@2#です。#の使用が推奨されています。)

組み合わせ可能ですが、 hiddeninlineeval、そしてpragmaスタイルが排他的な関係にあります。

次のように書きます。
cheap-module-inline-source-map
cheap-eval-source-map
#@source-map

ヒント: あなたのモジュールが既にソースマップに含まれている場合は、発行されたソースマップとマージするために、 source-map-loaderを使用する必要があるでしょう。

devtool ビルド
速度
再ビルド
速度
製品版
サポート
特徴
eval +++ +++ コードが生成される
cheap-eval-source-map + ++ 変換されたコード
(行のみ)
cheap-source-map + o 変換されたコード
(行のみ)
cheap-module-eval-source-map o ++ 元のソース
(行のみ)
cheap-module-source-map o - 元のソース
(行のみ)
eval-source-map + 元のソース
source-map 元のソース
//例: 
{
    devtool: "#inline-source-map"
}
// =>
//# sourceMappingURL=...

注意: 時期メジャーバージョンで-dのデフォルトは、cheap-module-eval-source-mapに変更されます。

devServer

webpackの設定がwebpack-dev-serverのCLIに渡される際に、 webpack-dev-serverの挙動を設定するのに使用することができます。

// 例:
{
    devServer: {
        contentBase: "./build",
    }
}

node

polyfillやモックなど様々なノードのことが含まれます。

console
trueまたはfalseを指定します。
global
trueまたはfalseを指定します。
process
true"mock"falseのいずれかを指定します。
Buffer
trueまたはfalseを指定します。
__filename
true(contextオプションの相対からの実際のファイル名)、"mock"("/index.js")、false(通常のnodeの__dirname)のいずれかを指定します。
__dirname
true(contextオプションの相対からの実際のフォルダ名)、"mock"("/")、false(通常のnodeの__dirname)のいずれかを指定します。
<node buildin>
true"mock""empty"falseのいずれかを指定します。
// デフォルト:
{
    console: false,
    global: true,
    process: true,
    Buffer: true,
    __filename: "mock",
    __dirname: "mock",
    setImmediate: true
}

amd

require.amddefine.amdの値を設定します。

例: amd: { jQuery: true }(jQueryの古い1.x系のAMDバージョン用)

loader

loaderのコンテキスト内で利用可能なカスタム値を指定します。(翻訳に自信なし)

recordsPath, recordsInputPath, recordsOutputPath

jsonファイルから/へのコンパイラ状態の保存/読み込みを行います。 これは、モジュールとチャンクの継続的(persistent)なidになります。 絶対パスの指定が求められます。 recordsPathは、recordsInputPathrecordsOutputPathがそれぞれundefinedの場合に使用されます。 コンパイラへの複数の呼び出し間でHot Code Replacementを使用している際は、この設定が必須になります。

plugins

コンパイラへ拡張プラグインを追加します。

 Back to top

© 2010 - 2017 STUDIO KINGDOM