Question

我第一次使用Webpack而且我的图片不会加载... 404错误。似乎图像没有到达我的dist文件夹。如果我手动将图像文件插入dist文件夹，则会显示它们。我的理解是，当你运行它时，Webpack会在dist文件夹中生成所有内容。这让我相信我的模块规则中的问题。

这是我的图片标记：

  <img class="img-responsive" src=<%=('images/tech-town-showcase-students.JPG') %> alt="students meeting with tech business owner"/>

从我的config.js：

module: {
    rules: [
        {
          test: /\.scss$/,
          use: cssConfig
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          use: [
              'file-loader?name=images/[name].[ext]',
              'image-webpack-loader'
            ]
        },

我尝试将dist文件夹添加到路径中，如下所示：

'file-loader?name=dist/images/[name].[ext]',

但这没有帮助。我还应该注意什么？

Answer 1

您的图片未被复制到dist目录，因为webpack根本不会处理它们，因此您的file-loader不会应用于它。在您的图片代码中，您使用了：

src=<%=('images/tech-town-showcase-students.JPG') %>

假设您使用EJS作为模板引擎，那将等同于src=images/tech-town-showcase-students.JPG。 Webpack不会将其作为模块处理，因为它是一个常规字符串，不会被视为导入。

您需要导入它，以便webpack将应用您为该文件配置的加载器。您已经在字符串周围添加了括号，因此您可能已经从某处复制了它并忘记包含require。

src="<%= require('./images/tech-town-showcase-students.JPG') %>"

Answer 2

我们可以使用 webpack 中的 url-loader 将我们的图像资产与我们的包捆绑在一起。

使用 npm 安装 url-loader

npm install url-loader --save-dev

在 webpack.config.js 中配置规则

 module: {
    rules: [
      {
        test: /\.svg$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              encoding: false,
            },
          },
        ],
      },
    ],
  },

捆绑包后，我们可以根据我们的 url-loader 配置找到图片来源

Webpack：图像不会加载

2 个答案: