CODEWITHSUNDEEP
imagewebpack
shireef khatab
shireef khatab

Reputation: 1005

How to bundle images with Webpack?

I'm following webpack2 guide asset managing, all is well, but when I added my image it comes as a separate file next to bundle.js inside the dist folder, and because no reference in the index.html to that image it throws an error file not found.

I was thinking that the image will be handled inside the bundle.js.

So, I wish to discover how I can use images with webpack.

Here is my folder structure:

    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

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

The error:

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

That's because the image has been moved by webpack to:

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

What am I doing wrong and different from the Webpack guide page?

Upvotes: 0

Views: 3289

Answers (1)

sergei
sergei

Reputation: 1176

You should move your index.html file inside dist directory because the file paths are generated relative to the output directory.

Also, you can use HTML Webpack Plugin to dynamically generate your index.html file, because it is recommended to use hash in the assets file names to avoid the browser caching problems.

Upvotes: 1

Related Questions