webpack configuration

12731 ワード
webpack
元はwebpack公式サイトからのAPI/configuration:http://webpack.github.io/docs/configuration.html
翻訳は以下の通りです.
Webpackには構成オブジェクトが必要です.Webpackの使用に応じて、この構成オブジェクトを渡すには2つの方法があります.
CLI CLIを使用すると、webpack.config.js(または--configパラメータで指定されたファイル)が読み出されます.このファイルは構成オブジェクトを出力します.
module.exports = {
    // configuration
};

node.js APIでnodeを使っている場合.js APIでは、この構成オブジェクトをパラメータとして渡す必要があります.
webpack({
    // configuration
}, callback);

多重配置In both cases you can also use an array of configurations,which are processed in parallel.They share filesystem cache and watchers so this is more efficent than calling webpack multiple times.
オブジェクトの内容の設定
ヒント:構成で純粋なJSONを使用する必要はありません.JavaScript文を使用することができます.それはnodeだけです.jsモジュール.
簡単な構成オブジェクトの例:
{
    context: __dirname + "/app",
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}

context
The base directory (absolute path!) for resolving the entry option. If output.pathinfo is set, the included pathinfo is shortened to this directory.
Default: process.cwd()
entry
パッケージの入口If you pass a string:The string is resolved to a module which is loaded upon startup.If you pass an array: All modules are loaded upon startup. The last one is exported. 
entry: ["./entry", "./entry2"]

If you pass an object: Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array. 
{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        // Make sure to use [name] or [id] in output.filename
        // when using multiple entry points
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }
}

NOTE: It is not possible to configure other options specific to entry points. If you need entry point specific configuration you need to use multiple configurations.
output
コンパイル出力に影響するオプションは、outputオプションでwebpackにファイルをディスクにコンパイルする方法を示します.複数のエントリ(entry)があるかもしれませんが、outputは1つしか指定できません.
output.filename
ディスクに出力される各ファイルの名前を指定します.絶対パスは使用できません.output.pathオプションは、ファイルのディスク領域の位置を決定し、filenameは単一のファイルに名前を付けるために使用されます.single entry 
{
    entry: './src/app.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/build'
    }
}
// wirtes to disk: ./build/bundle.js

Multiple entries構成で複数の「chunk」(複数のエントリまたはCommonsChunkPluginのようなプラグインが使用されている)が作成されている場合は、各ファイルの名前が一意であることを確認するために、次のように置き換える必要があります.[name] is replaced by the name of the chunk. [hash] is replaced by the hash of the compilation. [chunkhash] is replaced by the hash of the chunk. 
{
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/build'
    }
}
// wirtes to disk: ./build/app.js, ./build/search.js

output.path
the output directory as absolute path (required). [hash] is replaced by the hash of the compilation.
output.publicPath publicPathは、ブラウザで参照されるときに出力されるファイルの静的URLアドレスを指定する.例えば、埋め込まれたまたはのラベル、 されたピクチャなどである.ファイルのhrefまたはurl()がローカルパスと なる (pathで されている)、publicPathが されます. のドメイン またはCDNで ファイルの または を する に です.The Webpack DevServer also uses this to determine the path where the output files are expected to be served from.As with path you can use the [hash] substitution for a better caching profile. config.js 
output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}

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

CDNとhashesを いるより な config.js 
output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

Note: なpublicPathがコンパイル に されないように、it can be left blank and set dynamically at runtime in the entry point file.If you don’t know the publicPath while compiling you can omit it and set webpack_public_path on your entry point. 
__webpack_public_path__ = myRuntimePublicPath
// rest of your application entry

output.chunkFilename
The filename of non-entry chunks as relative path inside the output.path directory.
[id] is replaced by the id of the chunk.
[name] is replaced by the name of the chunk (or with the id when the chunk has no name).
[hash] is replaced by the hash of the compilation.
[chunkhash] is replaced by the hash of the chunk.
module
options affecting the normal modules ( NormalModuleFactory )
module.loaders
An array of automatically applied loaders.
の には、+test: する がある +exclude: しない +include:パスまたはファイルを む があり、そのファイルはこのloaderによってtransformed+loader: "!"loaderを る +loaders:loaderの を む.A condition may be a RegExp (tested against absolute path), a string containing the absolute path, a function(absPath): bool, or an array of one of these combined with “and”.
IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. This means they are not resolved relative to the configuration file. loadersがnpmでインストールされており、node_modulesフォルダがすべてのソースファイルの ではない 、webpackは するloaderが つからない があります.node_modulesフォルダの パスをresolveLoader.rootオプションに する があります.
resolveLoader: {root: path.join(__dirname, "node_modules")}

Example: 
module: {
    loaders: [{
        // "test" is commonly used to match the file extension
        test: /\.jsx$/,
        // "include" is commonly used to match the directories
        include: [
            path.resolve(__dirname, "app/src"),
            path.resolve(__dirname, "app/test")
        ],
        // "exclude" should be used to exclude exceptions
        // try to prefer "include" when possible

        // the "loader"
        loader: "babel-loader" // or "babel" because webpack adds the "-loader" automatically
    }]
}

module.preLoaders, module.postLoaders module.loadersのような です.preとpost loadersを む .
module.noParse
するファイルに して を わない または の .It’s matched against the full resolved request. きなフォルダを した のパフォーマンスを させることができます.これらのファイルは、require、defineまたは の のものを する はありませんが、exportsおよびmodule.exportsを することができます.
automatically created contexts defaults module.xxxContextXxx
contextのデフォルト には、3つの +exprContext: (i.e.require(expr)+wrappedContext:An expression plus pre-and/or suffixed string(i.require(./templates/"+expr))を するオプションがあります.
..... ろのはあまり て からないで、このオプションが をしているのかよく かりません
Example: 
{
    module: {
        // Disabled handling of unknown requires
        unknownContextRegExp: /$^/,
        unknownContextCritical: false,

        // Disabled handling of requires with a single expression
        exprContextRegExp: /$^/,
        exprContextCritical: false,

        // Warn for every expression in require
        wrappedContextCritical: true
    }
}

resolve
モジュール に するオプション
resolve.alias
モジュールを のモジュールまたはパスで き えます.インデックス きオブジェクトで、keyはモジュール として され、valueは しいパスであり、 のように いが、keyが$ で わると、 に しているものだけが される.
valueが パスである 、require()を むファイルに して になります.
Example: なるalias を して/abc/entry.jsファイルでモジュールを び します.webpack configuration_ 1
index.js may resolve to another file if defined in the package.json. /abc/node_modules may resolve in/node_modules too.
resolve.root
あなたのモジュールを むフォルダ( パス)は、フォルダ であってもよいし、This setting should be used to add individual directories to the search pathであってもよい.
パスでなければなりません../を しないでください.app/modulesというExample:
var path = require('path');

//...
resolve: {
    root: [
        path.resolve('./app/modules'),
        path.resolve('./vendor/modules')
    ]
}
1000万件のテストデータを挿入するためのストアド・プロシージャ
最大公約数の2種類の解法(ユークリッドアルゴリズムと素数分解)を求めます