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

Question

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

开发配置按预期工作，但生产配置有一个问题：一切正常，但图像没有从源文件夹复制和优化：src/images/sm，src/images/bg 到 dist/images/sm，@987654329 @。

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 Drive，如果有人想查看它，here 就是。 我用谷歌搜索了一整天，我的代码没有发现任何问题。 我尝试了其他 webpack 配置，它们的代码与我的相同，并且它们的图像被复制到 dist 文件夹中。 谁能帮我解决这个问题？

Answer 1

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

我还更改了 quality 属性，因为 webpack 需要一个数组而不是字符串。

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

要在 dist 文件夹中生成与 src 相同的树方案下的图像，我必须更改这部分：

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

Answer 2

尝试使用 copy-webpack-plugin。 它对我有用。 我试着喜欢这个。

首先，您需要安装 copy-webpack-plugin 模块。

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

在 webpack.config.js 中：

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

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