イメージをWebpackにバンドルするには？

Question

私は私は私の画像を追加したとき、それはdistのフォルダ内bundle.jsの隣に別ファイルとして付属しており、それにindex.htmlをでていないので、参照 すべてが順調である、webpack2ガイドasset managingを以下の、しかし。..よimageエラーファイルが見つかりません。私はイメージがbundle.js内handeledされることを考えていた:(

ので は今、どのように私はWebPACKので画像を使用することができます。..ここ

は私のフォルダ構造でください

dist 
     bundel.js 
     4942b81d7881a9d50c8984802eed28be.png 
    node_modues 
    src 
     css 
      style.css 
     js 
      app.js 
      content.js 
     images 
      icon.png 
    index.html 
    package.json 
    webpack.config.js 

マイapp.js：

const content = require("./content.js"); 
    import _ from 'lodash'; 
    import '../css/style.css' 
    import icon from '../images/icon.png'; 

    document.write(content); 
    console.log('Hello world!'); 

    /* Lodash */ 
    function component() { 
     var element = document.createElement('div'); 

     element.innerHTML = _.join(['Hello', 'webpack'], ' '); 
     element.classList.add('hello'); 

     var myIMG = new Image(); 
     myIMG.src = icon; 
     element.appendChild(myIMG); 

     return element; 
    } 

    document.body.appendChild(component()); 

style.js：

body { 
     background: #bada55; 
    } 

    .hello { 
     color: red; 
     background: url('../images/icon.png'); 
     } 

webpack.config.js：

const path = require('path'); 

    module.exports = { 
     entry: "./src/js/app.js", 

     output: { 
      filename: 'bundle.js', 
      path: path.resolve(__dirname, 'dist') 
     }, 

     module: { 
      rules: [ 
       { 
        test: /\.css$/, 
        use: [ 
        'style-loader', 
        'css-loader' 
        ] 
       }, 
       { 
        test: /\.(png|jpg|jpeg|svg|gif)$/, 
        use: [ 
         'file-loader' 
        ] 
       } 
      ] 
     } 


    }; 

package.json：

{ 
     "name": "letsLearnES6", 
     "version": "1.0.0", 
     "description": "", 
     "main": "app.js", 
     "scripts": { 
     "build": "webpack" 
     }, 
     "keywords": [], 
     "author": "", 
     "license": "ISC", 
     "devDependencies": { 
     "css-loader": "^0.28.7", 
     "file-loader": "^1.1.5", 
     "lodash": "^4.17.4", 
     "style-loader": "^0.19.0", 
     "webpack": "^3.6.0" 
     } 
    } 

エラー：

GET file:///...Root_directory_path.../4942b81d7881a9d50c8984802eed28be.png net::ERR_FILE_NOT_FOUND 

画像がへのWebPACKによって動かされているためです。

file:///...Root_directory_path.../dist/4942b81d7881a9d50c8984802eed28be.png 

誰かが私に間違ったやり方を教えてもらえると助かります。Webpack guide page

ありがとうございます。

Answer 1

ファイルパスが出力ディレクトリへの相対生成されますので、あなたはdistディレクトリ内の自分のindex.htmlファイルを移動する必要があります。

また、ブラウザキャッシュの問題を回避するため、アセットファイル名にハッシュを使用することをお勧めしますので、index.htmlファイルを動的に生成するには、HTML Webpack Pluginを使用してください。