Webpack 不生成图像答案

【问题标题】：Webpack don't generate imagesWebpack 不生成图像
【发布时间】：2021-07-05 13:41:35
【问题描述】：

简而言之，这里有我的 webpack（下面，我放了相关的代码）。

实际上，webpack 使用字体的 svg 创建图像文件夹，而不是 svg 图像。（截图如下）

 module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader',
        },
        {
            test: /\.(sa|sc|c)ss$/,
            exclude: /node_modules/,
             use: [
                'style-loader', // Creates `style` nodes from JS strings
                'css-loader', // Translates CSS into CommonJS
                'sass-loader', // Compiles Sass to CSS
            ],
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                 {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'image/'
                    }
                }
            ]
        },
        {
            test: /\.(woff(2)?|ttf|otf|eot)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'font/'
                    }
                }
            ]
        }
    ]
},

这是我的 HTML：

<div class="cc-header__left">
    <img src="image/LOGO.svg" alt="logo conseil constitutionnel" />
    <p class="cc-header__logoName"> Élection présidentielle <span>2022</span></p>
</div>

【问题讨论】：

标签： html webpack

【解决方案1】：

您可以尝试安装html-loader 并将新的加载程序添加到配置中

module: {
  rules: [
    // ... 
    {
       test: /\.html$/i,
       use: { 
         loader: 'html-loader',
       }
     }
  ]
}

【讨论】：

我已经这样做并删除了它，因为它不起作用

【解决方案2】：

我找到了这个解决方案：

const importAll = require =>
  require.keys().reduce((acc, next) => {
    acc[next.replace("./", "")] = require(next);
    return acc;
  }, {});

const images = importAll(
  require.context("./image", false, /\.(png|jpe?g|svg)$/)
);

我已将此代码添加到我的 app.js

【讨论】：