How to get images in webpack production?

Question

There is no images in the production folder. is there any simple way to fix the issue in webpack config ?

packaage.json

"scripts": {
  "start": "npm run build",
  "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
  "build:prod": "webpack -p && cp src/index.html dist/index.html"
},

webpack.config.js

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

const extractPlugin = new ExtractTextPlugin({
    filename: '[name].css'
});
const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');

const config = {
    entry: SRC_DIR + '/App.js',
    output: {
        path: DIST_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query:{
                    presets: ['es2015']
                }
            },
            {
                test: /\.scss$/,
                use: extractPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: (loader) => [
                                    require('autoprefixer')({
                                        browsers: ['last 2 version']
                                    }),
                                    require('postcss-flexbugs-fixes')(),
                                    require('css-mqpacker')
                                ]
                            }
                        },
                        {
                            loader: 'sass-loader',
                        }
                    ]
                })
            },
            {
                test: /\.(jpeg|png)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'img/',
                            publicPath: 'img/'
                        }
                    }
                ]
            },
            {
                test: /\.(woff2?|svg)$/,
                use: 'url-loader?limit=10000&name=fonts/[name].[ext]'
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            }
        ]
    },
    plugins:[
        extractPlugin,
        new CleanWebpackPlugin(['dist'])
    ]
};

module.exports = config;

Answer 1

If you do not use require('image.jpg'); in your application code webpack will not resolve it (and therefore it will not be moved to your dist folder). If you require images in your css files using url() you need to include a url-loader for webpack to parse it. See more