webpack構成は、よく使われるloader加載器です.

webapckでloaderを使う方法は3つあります.
loaderを使う前に必ずインストールを実行します.npm install.save-dev xx-loader.
(1)CLI経由:命令行でwebpack--module-bind jadeを実行する --module-bind'css=style!css  
//jade、style、cssの後は省略できます.彼らはそれぞれです.jadeはjade-loaderを使います.そうです.cssはstyle-loaderとcss-loaderを使います.
(2)require:require('style-loader!cs-loader?module!/style/main.css')を通じて
//main.cssにcss-loaderとstyle-loaderを使ってロードします.loader解析順序は右から左へです. 
(3)webpack.co.nfig.jsを設定することにより: 
//webpack.co nfig.jsでmodules属性を挿入する;(1)rulesにはオブジェクト配列が含まれています.各オブジェクトの中で{test,use}testは正規表現に対応しています.useには複数の必要なloaderが含まれています.例えば、一つのloaderだけが必要なら、useを省きます.フォーマット:loader:'xx-loader'

modules : {
    rules : [
        {
　　　　  test : /\.css/,
         use : [
            { loader : 'style-loader'},
            {
               loader : 'css-loader',
               options : {
                  module : true     
               }
             } 
          ]
    　　 }，
　　　　{//   loader}，
　　　　{//   loader}
　　]      
}

 
1.テンプレート:
(1)httml-loader:HTMLファイルを書き出して文字列としてコンパイルし、jsで識別できるモジュールの一つです.
(2)pug-loader:pugテンプレートをロードする
(3)jade-loader:jadeテンプレートをロードする(pugの前身であり、商標問題でpugと改名する)
(4)ejs-loader:ejsテンプレートをロードする
(5)handlebars-loader:HandlebarsテンプレートをHTMLに移行する
2.スタイル:
(1)css-loader:解析cssファイル中のコード
(2)style-loader:cssモジュールをスタイルとしてDOMにエクスポートする
(3)less-loader:lessファイルのロードと転送
(4)sass-loader:sass/scssファイルのロードと転送
(5)postcss-loader:postcssを使用してcss/sssファイルをロードし、転送します.
3.スクリプト変換コンパイル:
(1)script-loader:グローバルコンテキストでjavascriptファイルを一回実行します.解析は不要です.
(2)babel-loader:ES 6+コードをロードした後、Babelを使ってES 5に変換してからブラウザが解析できます.
(3)typescript-loader:Typeescriptスクリプトファイルをロードする
(4)coffee-loader:Coffee scriptスクリプトファイルをロードする
4.JSONローディング:
(1)Json-loader:Jsonファイルをロードする(デフォルトで含む)
(2)Json 5-loader:JSON 5ファイルのロードと転送
5.Filesファイル
(1)raw-loader:ファイルのオリジナルコンテンツをロードする(utf-8フォーマット)
(2)url-loader:多くはピクチャリソースをロードするために使用され、ファイルサイズを超えるとdata URLに戻ります.
(3)file-loader:ファイルを出力するフォルダに送信し、URL(相対パス)に戻ります.
(4)jshint-loader:コードフォーマットの誤りを確認する
6.フレームの読み込み:
(1)vue-loader:ロードと転送のvueコンポーネント
(2)anguler 2-templatee-loader:アドインと転送のanglarコンポーネント
(3)react-hot-loader:動的リフレッシュと転送reactコンポーネントで修正された部分は、webpack-dev-serverプラグインに基づいて先にインストールしてから、webpack.co nfig.jsでreact-hot-loaderを参照してください.
転載先:https://www.cnblogs.com/hughes5135/p/6891784.html