file-loader is not coping images

Question

I am making the transition from gulp to webpack and I have images in a static/img folder that I want to process with image-webpack-loader and then copy to a build/public/img folder. Is file-loader what I want to use for this? The problem is that the images are not being copied. In fact it seems like this loader is being ignored during the build.

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

module.exports = {
  context: path.resolve(__dirname, 'static'),
  entry: ['./js/frontend.js','./sass/app.scss'],
  output: {
    path: path.join(__dirname, 'build/public'),
    filename: 'js/frontend.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: [
            'file-loader?name=img/[name].[ext]',
            'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      },
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ 
      filename: 'css/styles.css',
      allChunks: true
    })
  ],
  devtool: 'source-map'
};

Answer 1

If you don't require the images somewhere, Webpack doesn't know they exist and won't process them.

Put following code inside ./js/frontend.js to force Webpack to require every asset from the static/img folder:

// load assets
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('img/', true));

Answer 2

I'm not sure if this is a solution or a workaround, but what I did is use the CopyWebpackPlugin with the ImageminPlugin:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'static'),
  entry: ['./js/frontend.js','./sass/app.scss'],
  output: {
    path: path.join(__dirname, 'build/public'),
    filename: 'js/frontend.js'
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }]
        })
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('build/public'),
    new ExtractTextPlugin({ 
      filename: 'css/styles.css',
      allChunks: true
    }),
    new CopyWebpackPlugin([
      {
        from: 'img', to: 'img'
      }
    ]),
    new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
  ],
  devtool: 'source-map'
};