Webpack:設定モジュール(module)

設定module

Module

Loader

概念

Module
モジュールの扱い方
Loader
概念

loaderは、モジュールのソースコードを変換するために使用される

.

loaderは、importまたは「ロード」モジュールの時にファイルを前処理することができます.

したがって、他の構築ツールの「タスク(task)」と同様に、フロントエンド構築ステップを処理する強力な方法が提供される.loaderは、ファイルを異なる言語(Type Scriptなど)からJavaScriptに変換したり、インライン画像をdata URL

に変換したりすることができる.

loaderはJavaScriptモジュールの中で直接にimport CSSファイルを許可します.

rules構成モジュールの読み込みと解析規則は、一般的にLoaderを構成するために用いられる.このタイプは配列で、各項目はどのように部分ファイルを処理するかを説明しています.rulesを設定する場合は、大体以下のようにします.

条件マッチング:test、include、excludeの3つの構成項を通して、Loaderがルールを適用するファイル

に命中する.

アプリケーション規則:選択されたファイルに対してuse構成項を通してLoaderを適用し、一つのLoaderだけを適用しても良いし、後から前の順序でLoaderのセットを適用しても良いし、それぞれLoaderにパラメータ

を入力しても良いです.

リセット順序:Loaderのセットの実行順序はデフォルトでは右から左に実行され、enforceオプションによって、いずれかのLoaderの実行順序を一番前または最後の

に置くことができます.
具体的な使用方法を例によって説明する.

module: {
  rules: [
    {
      //    JavaScript   
      test: /\.js$/,
      //   babel-loader    JavaScript   
      // ?cacheDirectory      babel-loader    ，     babel             
      use: ['babel-loader?cacheDirectory'],
      //    src    js  ，   Webpack     
      include: path.resolve(__dirname, 'src')
    },
    {
      //    SCSS   
      test: /\.scss$/,
      //      Loader     SCSS   。
      //          ，     sass-loader   ，       css-loader      style-loader。
      use: ['style-loader', 'css-loader', 'sass-loader'],
      //    node_modules       
      exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
      //          file-loader   
      test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
      use: ['file-loader'],
    },
  ]
}

Loaderが多くのパラメータを導入する必要がある場合、Objectによっても記述できます.例えば、上のbabel-loader構成には以下のコードがあります.

use: [
  {
    loader:'babel-loader',
    options:{
      cacheDirectory:true,
    },
    // enforce:'post'        Loader          
    // enforce        pre，    Loader           
    enforce:'post'
  },
  //      Loader
]

上記の例では、test include excludeの3つの命中ファイルの構成項目は、1つの文字列または正則だけに伝えられていますが、それらはまた、配列タイプをサポートしています.

{
  test:[
    /\.jsx?$/,
    /\.tsx?$/
  ],
  include:[
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'tests'),
  ],
  exclude:[
    path.resolve(__dirname, 'node_modules'),
    path.resolve(__dirname, 'bower_modules'),
  ]
}

配列内の各項目の間の関係、すなわちファイルパスは配列内のいずれかの条件に合うと命中されます.
原文の住所:https://www.cnblogs.com/joyco773/p/9049693.html