39

私はwebpackを初めて使用し、ローダーと、テスト、ローダー、インクルードなどのプロパティを理解しようとしています.

これは、Google で見つけた webpack.config.js のサンプル スニペットです。

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'index.js'),
          path.resolve(__dirname, 'config.js'),
          path.resolve(__dirname, 'lib'),
          path.resolve(__dirname, 'app'),
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'test', 'test.build.js')
        ],
        cacheDirectory: true,
        query: {
          presets: ['es2015']
        }
      },
    ]
}

  1. テスト: /.js$/ は、拡張子が .js のファイルにのみ使用されますか?

  2. ローダー: 'babel-loader' は、npm を使用してインストールするローダーです。

  3. インクルード：これについて多くの質問があります。配列の中に入れたものは何でもトランスパイルされるというのは正しいですか? つまり、index.js、config.js、および lib、app、src 内のすべての *.js ファイルがトランスパイルされます。

  4. インクルードに関するその他の質問: ファイルがトランスパイルされると、*.js ファイルは 1 つの大きなファイルに連結されますか?

  5. 除外は自明だと思います。トランスパイルされません。

  6. query: { presets: ['es2015'] } は何をしますか?

4

3 に答える 3

21

webpack config には複数の設定項目がありますが、重要なものは次のとおりです。

  1. entry - バンドルするアセットのエントリ ポイントを定義する配列またはオブジェクトにすることができます。また、test here が言うように、/.js$ に対してのみ実行するように js にすることもできます。アプリケーションに複数のエントリ ポイントがある場合は、配列を使用します。
  2. include - インポートされたファイルがローダーによって変換される一連のパスまたはファイルを定義します。
  3. exclude は自明です (これらの場所からファイルを変換しないでください)。

  4. output - 作成する最終的なバンドル。たとえば指定すると

    output: { ファイル名: "[name].bundle.js"、ベンダー: "react" }

    次に、アプリケーションの js ファイルが main.bundle.js としてバンドルされ、vendor.js ファイルで反応します。html ページで両方を使用しないとエラーになります。

それが役に立ったことを願っています

于 2016-01-18T18:36:44.613 に答える
-2

1) 正しい。

2) 正しい。

3) 正しい。

4) よくわかりません。私の webpack.config.js ファイルには出力キーが含まれており、すべてを 1 つのファイルにまとめています。

output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
}

5) 正しい。

6) これは、実行したいトランスパイルの種類と、その他のコンパイルオプションをbabel-loaderに伝えます。したがって、たとえば、jsx もトランスパイルし、パフォーマンスを向上させるために結果をキャッシュする場合は、次のように変更します。

query: {
    presets: ['react', 'es2015'],
    cacheDirectory: true
}
于 2016-01-05T23:49:35.617 に答える