Webpack is not copying images to dist folder

Question

I'm starting with webpack, but I'm really new on this and I'm stuck right now. My project copies my fonts correctly but not images. Now the only way I am able to make it work is by copying my images manually to the dist/img folder.

This is my config:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');
var path = require("path");

module.exports = {
entry: './src/app.js',
output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'app.bundle.js'
    // publicPath:  '/dist',
},
module: {
    rules:[
        {
        test:/\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader?sourceMap","resolve-url-loader","sass-loader?sourceMap"],
            // publicPath: '/dist'
            })
        },
        {
            test: /\.(woff2?|ttf|otf|eot|svg)$/,
            use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }  
                  }]
            // loader: 'file-loader?name=/fonts/[name].[ext]'
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath:'img/'
                    }  
                  }]
        }
    ]
},
devServer: {
    contentBase: path.join(__dirname, "/dist"),
    compress: true,
    port: 8000,
    stats: "errors-only",
    open: true
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }),
    new ExtractTextPlugin("styles.css"),
    new HtmlWebpackPlugin({
        title: 'Project',
        hash:true,
        template: './src/index.html'
    })
]
}

I've tried several configurations but no solution. I also searched here for any solution but without success.

Interpellation

Answer 1

If your images are only referenced in HTML files as <img> tags, webpack by default won't pick them up because it doesn't parse HTML. You have at least 2 choices:

1. Use CopyWebpackPlugin to copy the files to wherever you want, this at least removes the "manual" part you mention

2. Move your images references to styles, where webpack can pick them up via the scss loader you are using. For example

   background-image: url("img/foo.png");
   

Outguard

Ah ok thanks! I´m trying now with CopyWebpackPlugin and it works great! – Interpellation

great! Please accept this answer if it is working for you. – Outguard

i'm try to use your solution but i have problem – Aflutter

new CopyPlugin([ { from: './img/*', to: 'img', force: true}, ]) – Aflutter

It works, but copy files without image optmizations – Bertolde

Answer 2

There is also option import image trough JavaScript.

import '../img/image.png';

Combo

Answer 3

I had this problem. I didn't know that the file-loader only copies the images if you run a build, and doesn't do anything while using webpack-dev-server. My solution was just:

$ npx webpack

Ptisan