webpack 3.0のloader配置と編纂(一)

loaderはモジュールのソースコードを変換するために使用されます.loaderは、importまたは「読み込む」モジュールでファイルを前処理することができます.loaderは、ファイルを異なる言語(Type Scriptなど)からJavaScriptに変換したり、インライン画像をdata URLに変換したりすることができる.loaderはJavaScriptモジュールの中で直接にimport CSSファイルを許可します.
Loaderの編纂に対して深く勉強する前に、まずloaderのよくある配置規則を熟知します.一般的な2つの構成ルールがあります.
ルール1:
loader構成におけるoptionsの値は、loader実行中に取得され、対応する処理を行うことができ、また、直接にloaderパスにqueryパラメータを追加することができる.

rules: [
   {

      test: /\.text$/,
      loader: 'text-loader?name=1'//     options   ，       query         
   }
]

まだ使えます  resolveLoader.modules 設定では、webpackはこれらのディレクトリからこれらのloadersを検索します.例えば、あなたのプロジェクトの中に一つがあれば  /loaders ローカルディレクトリでは、ディレクトリの中にtext-loader.jsという名前のloaderファイルがあります.

resolveLoader: {
  modules: [
    'node_modules',
    path.resolve(__dirname, 'loaders')
  ]
},
module: {
    rules: [

        {

          test: /\.text$/,
          loader: 'text-loader'//  node_modules      ，    loaders     
        }
    ]

}

いくつかのタイプのファイルに対して複数のloaderをマッチングしたいなら、下記の規則に従って配置できます.複数のloaderモジュールを使います.分割して、実際のloader実行順序は右から左へとなります.

{
 test: /\.scss$/,
 loader:'style-loader!css-loader!sass-loader'
}

ルール2:
複数のloaderにマッチしたいなら、use構成配列も使用できます.実際のloaderの実行順序は下から上になります.

{
  test: /\.scss$/,
  use:[
    {
      loader:'style-loader',
      options:{}
    },
    {
　　　　loader:'css-loader'
　　 },

    {
　　　　loader:'sass-loader'
　　　}

  ]
}

導入されたloaderに対して特別な構成をしないなら、use配列にloader名を追加すればいいです.

{
  test: /\.scss$/,
  use:['style-loader','css-loader','sass-loader']
}

は、リーダに対する基本的な構成ルールを熟知した後、自分のloaderをどうやって書くかを学びましょう.
webpack 3.0キャリアloader配置と作成(二)