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

Posted 2023-03-08

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

【英文标题】：Webpack's file loader doesn't copy images during production from /src to /dist

【发布时间】：2020-06-05 14:58:59

【问题描述】：

我有一个 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 文件夹中。 谁能帮我解决这个问题？

【参考方案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"
    ,
,

【参考方案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/"
        ],
      ),
   )