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;

You need to supply some application code as well. Does your application code require the images using require? Like `require('logo.png');`? — Esben, Aug 02 '17 at 08:42

score 1 · Answer 1 · answered Aug 03 '17 at 10:07

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

How to get images in webpack production?

1 Answers1