Webpack's file loader doesn't copy images during production from /src to /dist

Question

I have a Webpack setup which is split into 2 config files:

webpack.config.js handles the development portion which is fired using npx webpack-dev-server and webpack.config.prod.js respectively which handles the production by typing npm run build.

The development config works as expected, but the production one has one problem: everything works fine, but the images aren't copied and optimized from the source folder: src/images/sm , src/images/bg to dist/images/sm , dist/images/bg.

webpack.prod.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = function(){
  return {
    mode: 'development',
    entry: [
      './src/app.js'
    ],
    watch: true,
    watchOptions: {
      aggregateTimeout: 300, // Process all changes which happened in this time into one rebuild
      poll: 1000, // Check for changes every second,
      ignored: /node_modules/,
      // ignored: [
      //   '**/*.scss', '/node_modules/'
      // ]
    },
    devtool: 'source-maps',
    devServer: {
      contentBase: path.join(__dirname, 'src'),
      watchContentBase: true,
      host: '0.0.0.0',
      hot: true,
      open: true,
      inline: true,
      port: 9000
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Webpack starter project',
        template: path.resolve('./src/index.pug')
      }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: ['raw-loader', 'pug-html-loader'],
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            "css-loader",
            "sass-loader"
          ]
        },
        {
          test: /\.(jpg|jpeg|gif|png|svg|webp)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                outputPath: './images',
                name: "[name].[ext]",
              },
            },
          ]
        },
        {
          test: /\.html$/,
          use: {
            loader: 'html-loader',
          }
        },
      ]
    }
  };
}

webpack.config.prod.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');

module.exports = function(){
  return {
    mode: 'production',
    entry: [
      './src/app.js'
    ],
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin()
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Webpack starter project',
        filename: 'index.html',
        template: path.resolve('./src/index.pug')
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css'
      }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: ['raw-loader', 'pug-html-loader'],
        },
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
        },
        {
         test: /\.(jpg|jpeg|gif|png|svg|webp)$/,
         use: [
           {
             loader: "file-loader",
             options: {
               outputPath: './images',
               name: "[name].[ext]",
             },
           },
           {
             loader: 'image-webpack-loader',
             options: {
               bypassOnDebug: true,
               mozjpeg: {
                 progressive: false,
                 quality: 45
               },
               // optipng.enabled: false will disable optipng
               optipng: {
                 enabled: true,
               },
               pngquant: {
                 quality: '65-90',
                 speed: 4
               },
               gifsicle: {
                 interlaced: true,
                 optimizationLevel: 3
               },
               // the webp option will enable WEBP
               webp: {
                 quality: 20
               }
             }
           },
         ],
       },
        {
          test: /\.html$/,
          use: {
            loader: 'html-loader',
          }
        },
      ]
    }
  };
}

I uploaded my webpack setup to Google Drive and if anybody wants to check it out, here it is. I googled all day and I don't see anything wrong with my code. I tried other webpack configs and they have the same code as mine and their images get copied in the dist folder. Can anyone help me figure this out?

Answer 1

Try with copy-webpack-plugin. It worked for me. I tried to like this.

First, you need to install the copy-webpack-plugin module.

npm install copy-webpack-plugin --save-dev

In webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports={
 plugins: (
   new CopyWebpackPlugin({
        patterns: [
          {from: "src/images", to: "images/"}
        ],
      }),
   )
}

Answer 2

Somebody on Reddit helped me. All I had to do was import the images in the app.js. Strangely, using other configs never required me to import the images, but I think that's because those configs were built using an older version of file loader.

I also changed the quality property since webpack expects an array instead of a string.

pngquant: {
  quality: [0.65, 0.90],
  speed: 4
}

To generate images in the dist folder under the same tree scheme as in the src I had to change this part :

{
  loader: "file-loader",
    options: {
        name: "[path]/[name].[ext]",
        context: "src"
    },
},