demo__image_loader

環境

webpack4.x

ファイル構造

│package.json 
│webpack.config.js 
│yarn.lock 
│ 
├─dist 
│1f871aa58.png 
│bundle.js 
│index.htmlを
│ 
├─node_modules 
└─src 
    ├─img 
    │       1 の.png 
    │ 
    └─js 
            アプリ。 JS

ファイルの内容（app.js）

// imgタグを作成し、画像の使用は、ファイル導入 
のlet SRC =ザ・は（ '../ IMG / 1.png'必要）; 
のlet IMG = 新しい新しい画像を（）; 
img.src = ; SRC 
IMG」（= document.querySelectorをボディ「）のappendChild（IMG） 。

 

方法1：ファイルローダー

package.json

{
   "名"： "ファイル" 、
   "バージョン"： "1.0.0" 、
   "メイン"： "index.js" 、
   "ライセンス"： "MIT" 、
   "devDependencies" ：{
     "ファイルローダー"：「^ 4.0.0" 、
     "WebPACKの"： "^ 4.33.0" 、
     "WebPACKの-CLI"： "^ 3.3.3" 
  } 
}

webpack.config.js

CONSTパス=（「パス」を必要とします）。

module.exportsは = { 
    エントリ：{ 
        アプリ：」./src/js/app.js' 
    }、
    出力：{ 
        ファイル名： 'bundle.js' 、
        パス：path.join（path.resolve（__ DIRNAME）、 'DIST' ）
    }、
    モード： '開発' 、
    モジュール：{ 
        ルール：[{ 
            テスト： /\.(jpg|png|gif)$/ 、
            使用：{ 
                ローダ： 'ファイルローダ' 、
                オプション：{ 
                    名：「[名前] [ハッシュ：8]。
                } 
            } 
        }] 
    } 
}。

 

方法2：URLローダ（生成されたファイル、所望であれば、ファイルローダ）

package.json

{
   "名"： "ファイル" 、
   "バージョン"： "1.0.0" 、
   "メイン"： "index.js" 、
   "ライセンス"： "MIT" 、
   "devDependencies" ：{
     "ファイルローダー"：「^ 4.0.0" 、
     "URL-ローダー"： "^ 2.0.0" 、
     "WebPACKの"： "^ 4.33.0" 、
     "WebPACKの-CLI"： "^ 3.3.3" 
  } 
}

 

webpack.config.js

CONSTパス=（「パス」）を必要とします。

module.exportsは= { 
    エントリ：{ 
        アプリ：」./src/js/app.js' 
    }、
    出力：{ 
        ファイル名： 'bundle.js'、
        パス：path.join（path.resolve（__ DIRNAME）、 'DIST' ）
    }、
    モード： '開発'、
    モジュール：{ 
        ルール：[ 
            { 
                テスト：/\.(jpg|png|gif)$/、
                使用：{ 
                    ローダ： 'URLローダ'、
                    オプション：{ 
                        限界：2×1024 、
                        名前： '[名] [ハッシュ：8]。[EXT]'




}。

 

パッケージング（index.htmlを開きます絵を見ることができます）

NPXのWebPACK