任何人都可以帮助我进行 webpack 配置吗？答案

【问题标题】：Could anyone please assist me on the webpack configuration?任何人都可以帮助我进行 webpack 配置吗？
【发布时间】：2021-06-24 00:29:17
【问题描述】：

我正在尝试为我的项目配置 webpack（我正在通过 youtube https://www.youtube.com/watch?v=mnS_1lolc44 上的 colt steele webpack 课程）。但是我无法正确配置我的图像，我尝试了所有方法并在互联网上到处查看，但无法弄清楚如何解决。下面是我的目录结构和代码sn-p。

我有三个 webpack 配置文件：webpack.common.js、webpack.dev.js 和 webpack.prod.js

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/index.js",
    plugins : [new HtmlWebpackPlugin({
        template: "./src/template.html"
    })],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ["style-loader","css-loader","sass-loader"]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                  {
                    loader: "file-loader",
                    options: {
                      name: "[name].[hash].[ext]",
                      publicPath: '/',
                      outputPath: 'img',
                      esModule: false
                    }
                  }
                ]
              },
              {
                test: /\.html$/,
                use: ["html-loader"]
            }              
        ]
    }
}

webpack.dev.js

const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');

module.exports = merge(common, {
    mode: "development",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    }
})

webpack.prod.js

const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "main.[contenthash].js",
        path: path.resolve(__dirname, "dist")
    }
})

我的 src 目录结构如下：

我正在通过 src/index.js 文件导入我所有的 sass 和其他 js 文件，如下所示：

我将 src/template.html 文件中的图片称为

所有图像都存在于 src/img 文件夹中，并且 template.html 文件通过路径将图像调用为“./img/”。

当我运行 npm build 命令时，我将 dist 文件夹创建为：

在这里，让我感到困惑的一件事是为什么图像会生成两次。一个在 dist/img 文件夹中，具有正确的名称 + 哈希值 + 扩展名，一个在 dist 文件夹中。此外，我生成的 index.html 文件正在调用 dist 文件夹中的图像（这是不正确的，为什么会生成我不确定）而不是调用 dist/img 文件夹中的图像？

上面的截图是生成的 dist/index.html 文件。这里的图片路径是dist文件夹中生成的图片的路径，不是正确的。

即使我尝试在 VS 代码中打开这些生成的图像（存在于 dist 文件夹中），我也会收到错误消息“加载图像时发生错误”。虽然图像存在于 dist/img 文件夹中，但在选择任何一个时都会显示正确的图像。

谁能帮助我理解这里，为什么 webpack 会生成两组图像（一组正确，另一组不正确）以及为什么生成的 dist/index.html 文件正在寻找不正确图像的路径不正确一个。

GitHub 仓库：git@github.com:Guru4741/Sedna.git

谢谢

【问题讨论】：

你能创建一个 GH repo 来重现错误吗？
当然。我已经编辑了我的问题并将回购链接放在下面。它在主分支。感谢@Andrei 的回复
感谢您的回购，我会调查的。同时我看到file-loader 是deprecated in v5。
感谢您回来。我正在尝试新的更新。感谢分享。请分享你的发现。再次感谢。
当然，这可能需要一段时间，但我会分享我在答案中找到的所有内容。

标签： javascript webpack webpack-dev-server webpack-4 webpack-style-loader

【解决方案1】：

您使用的是 webpack 5，并且有很大的变化。你的代码有很多错误，但你自己发现；）再说一句。这个“node_modules”不提交到 github :)

好的，让我们来看看为什么图片没有出现。移除“file-loader”库，然后移除这部分代码：

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  use: [{
    loader: "file-loader",
    options: {
      name: "[name].[hash].[ext]",
      publicPath: '/',
      outputPath: 'img',
      esModule: false
    }
  }]
},

替换为：

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'asset/resource',
  generator: {
    filename: 'img/[name][ext]',
  },
}

您可以访问此页面asset-modules了解有关资产的更多信息

还有一件事，你看的课程是相当老的 2019 年了，基本都一样，但是新的 webpack 5 有很多变化。

【讨论】：