如何將圖像與Webpack捆綁在一起？

我跟隨webpack2指南asset managing，一切都很好，但.. 當我添加我的圖像時，它作爲一個單獨的文件旁邊的dist文件夾中的bundle.js，因爲沒有引用index.html形象它拋出一個錯誤文件沒有找到。我在想，圖像將在bundle.js :(如何將圖像與Webpack捆綁在一起？

所以現在我怎麼可以使用帶有的WebPack請圖像內部handeled ..

這裏是我的文件夾結構：

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

請幫幫忙，我會明白更多，如果有人能告訴MRE我在做什麼錯的，不同於Webpack guide page

預先感謝您。

來源

2017-10-09 shireef khatab

你的圖像的什麼路徑被放入bundle.js文件中？ – sergei

請在我的問題結尾處看到我的更新 –

您應該將您的index.html文件移動到dist目錄中，因爲文件路徑是相對於輸出目錄生成的。

此外，您可以使用HTML Webpack Plugin動態生成index.html文件，因爲建議在資產文件名中使用散列以避免瀏覽器緩存問題。

來源

2017-10-09 12:48:48 sergei

我試着在控制檯中移動index.html ==>同樣的錯誤 –

另外，使用HTML Webpack Plugin不會解決問題，因爲eroor中圖像的引用是在根目錄不是dist文件夾 –

你是對的，index.html應該在dist文件夾內，我的壞..對不起，我來自gulp背景:(謝謝你 –

如何將圖像與Webpack捆綁在一起？

回答

相關問題