WebPack - Images

# npm install --save-dev image-webpack-loader url-loader

# npm install --save-dev file-loader

# vi webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {

    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
        publicPath: 'build/'
    },

    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/
            },
            {
                loader: ExtractTextPlugin.extract({
                    loader: 'css-loader'
                }),
                test: /\.css$/
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: { limit: 40000 }
                    },
                    'image-webpack-loader'
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ]

};


module.exports = config;

# vi src/image_viewer.js

import big from '../assets/big.jpg';
import small from '../assets/small.jpg';
import '../styles/image_viewer.css';

const image = document.createElement('img');
image.src = small;

document.body.appendChild(image);



const bigImage = document.createElement('img');
bigImage.src = big;

document.body.appendChild(bigImage);

# npm run build