Webpack的文件加载器在生产过程中不会将图像从/ src复制到/ dist

Question

我有一个Webpack设置，它分为2个配置文件：

[webpack.config.js处理分别使用npx webpack-dev-server和webpack.config.prod.js触发的显影部分，该部分通过键入npm run build处理生产。

开发配置按预期工作，但生产配置有一个问题：一切正常，但未从源文件夹src/images/sm，src/images/bg到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',
          }
        },
      ]
    }
  };
}

我将我的webpack设置上传到Google云端硬盘，如果有人想签出，则为here。我整日用Google搜索，但我的代码没有发现任何问题。我尝试了其他webpack配置，它们具有与我相同的代码，并且它们的图像被复制到dist文件夹中。谁能帮我解决这个问题？

Answer 1

Reddit上的某人帮助了我。我要做的就是将图像导入app.js。奇怪的是，使用其他配置从来不需要我导入图像，但是我认为这是因为这些配置是使用较旧版本的文件加载器构建的。

我还更改了quality属性，因为webpack期望使用数组而不是字符串。