web-dev-qa-db-ja.com

webpackローダーとインクルード

私は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. Excludeは自明だと思います。コンパイルされません。

  6. Query：{presets：['es2015']}は何をしますか？

javascriptecmascript-6webpackwebpack-style-loader
30
devwannabe

Webpack configには設定のための複数の要素がありますが、重要なものは

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

  4. 出力-作成する最終バンドル。例えば指定した場合

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

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

お役に立てば幸いです

18
sandeep

このドキュメントは、私がよりよく理解するのに役立ちました。 webpack 1のように見えますが、それでも適用されます。

https://webpack.github.io/docs/configuration.html#module-loaders

ローダー

自動的に適用されるローダーの配列。

各アイテムには次のプロパティを設定できます。

  • test：満たさなければならない条件
  • exclude：満たされてはならない条件
  • include：インポートされたファイルがローダーによって変換されるパスまたはファイルの配列
  • loader：「！」で区切られたローダーの文字列
  • loaders：文字列としてのローダーの配列

この例は、何が起こっているのかを理解するのに役立ちました。 includeまたはexcludeのいずれかを使用しているようですが、両方は使用していないようです。テストは、すべてのファイルに適用される条件です。したがって、フォルダーを含める場合、各ファイルはテスト条件に合格する必要があります。私はこれを確認していませんが、ドキュメントで提供されている例に基づいて、それがどのように機能するかが見えます。

    module: {

      rules: [
        {
          // "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
        }
      ]

    }
4
zechdc