使用中のwebackローダー - 画像ファイル

1.ターミナルを実行します

私は、URLローダー-D CNPM   // URLエラー解決のurl-ローダーをインストール 
CNPMをIファイル・ローダー-D    // 内部の依存関係を、設定ファイルには設定しません

2. [設定webpack.config.js

モジュール：{ 
    ルール：[ 
        {テスト： /\.(jpg|png|gif|bmp|jpeg)$/、// 画像のルールに一致する正規表現
        [{：使用
        ローダー：' URL-ローダー' 、
        オプション：{ 
            制限を：8192、// 限界充填画像サイズ：
             // 対応する画像ファイル名とパスのパッケージに応じて、より多いまたは8192Byteに等しい場合、8192Byte未満である、BASE64文字列は画像形式に変換します。
            名前：' 画像/ [名前] - [ハッシュ:. 8] [EXT]。'、// イメージ：イメージパッケージフォルダ;
             // [名前] [EXT]：元に応じて、画像のファイル名と拡張子を設定します。パッケージ、余分なコーディングなし
             // [ハッシュ：8]：プロジェクトと同じ名前の画像の2つのフォルダは、映像パッケージは重い避けるために、画像名などのトップ8のハッシュ値で、カバーされる場合名前。
        } 
        }]} 
    ] 
}

 

3.画像内の参照

1. css背景画像

背景画像：のURL（./画像/ img.jpg）

2. ラベルhtml<img>

 

<IMG SRC = " ./imges/img.jpg " >

 

3. jsパスの割り当て

CONST IMG = getElementByTagName（' IMG '）[ 0 ]; 
img.src = " ./imges/img.jpg "