Comment regrouper des images avec Webpack?

Question

Je suis webpack2 guide asset managing, tout va bien, mais .. quand j'ai ajouté mon image il s'agit d'un fichier séparé à côté de bundle.js dans le dossier dist, et parce qu'aucune référence dans l'index.html à cela image il jette un fichier d'erreur non trouvé. Je pensais que l'image sera handeled dans les bundle.js :(

Alors maintenant, comment puis-je utiliser des images avec webpack .. s'il vous plaît

Voici ma structure de dossier:

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 

Mes 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" 
     } 
    } 

L'erreur:

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

C'est parce que l'image a été déplacé par webpack à:

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

S'il vous plaît aider, je vais en savoir plus si quelqu'un peut dire à ce que je fais mal et différent de la Webpack guide page

Merci d'avance.

Answer 1

Vous devez déplacer votre fichier index.html dans le répertoire dist, car les chemins de fichier sont générés par rapport au répertoire de sortie.

De plus, vous pouvez utiliser HTML Webpack Plugin pour générer dynamiquement votre fichier index.html, car il est recommandé d'utiliser le hachage dans les noms des fichiers d'actifs pour éviter les problèmes de mise en cache du navigateur.