Webpack 只加载由 css 引用的图像。不加载js引用的图片答案

【问题标题】：Webpack only loads images referenced by css. Does not load images referenced by jsWebpack 只加载由 css 引用的图像。不加载js引用的图片
【发布时间】：2019-07-26 09:51:24
【问题描述】：

我的 dist 文件夹包含我的 index.html、contact.html、index.js、contact.js 以及我的 css 提到的两个图像作为背景图像。

例如

background-image: url("../images/prairie.jpg");

这就是我的 dist 文件夹中的所有内容。未加载所有其他图像（我的 css 未提及）。这些图像仅在 .js 文件中提及（例如 slideshow.js）。这个“slideshow.js”文件是幻灯片，它不显示任何图像，但显示丢失的图像图标。显示了前面提到的背景图像“../images/prairies.jpg”。 css 文件引用的所有照片都加载到 dist 文件夹中。所有仅由 .js 文件而不是 css 文件提及的照片都不会加载到 dist 文件夹中。

这是我的 webpack.config.js

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

const config = {
  mode: 'development',     // set mode option, 'development' or 'production'
  entry: {
    index: './src/index.js',
    contact:'./src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // webpack@1.x
              disable: true, // webpack@2.x and newer
            },
          },
        ],
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: true,
      chunks: ['index'],
      filename: './index.html'
    }),
  new HtmlWebpackPlugin({
    template: './contact.html',
    inject: true,
    chunks: ['contact'],
    filename: './contact.html'
})
  ]
};

module.exports = config;

【问题讨论】：

你是如何在 JS 中引用图片的？
我使用的是相对路径和 jsx，例如：
是的，这行不通。对于 js，您需要 require 图片.. 此信息可能对您有所帮助 -> medium.com/@godban/…
@Keith 你是个天才。我基本上必须将我的图像路径的所有字符串从“images/map.png”之类的东西更改为 require('images/map.png')。还有一件事，为了避免使用类似“39fjksjalef9.jpg”的名称，您知道如何在 jpg 名称中包含原始图像名称吗？出于 SEO 目的？
你可以告诉 webpack 使用什么文件名。也许试试这个 -> decembersoft.com/posts/…

标签： javascript css reactjs webpack

【解决方案1】：

当使用 webpack 时，当你还想捆绑图像/资产时。您无法使用正常的 url 方案访问它们，例如。 /images/my-image.png.

这是因为你告诉你的应用程序加载正常的 HTTP GET 方式，而不是通过你的包加载。

要从包中访问图像，你可以像 webpack 中的任何其他资产一样，require it..const image1 = require("images/image1.png") 等。在内部，webpack 将在这里做的是将二进制图像转换为数据 uri。这意味着您可以执行以下操作 -> <img src={image1}/>

如果您有很多图片，您可以使用require.context，但我个人避免使用它，因为我有点喜欢对加载的资产进行更多控制。

为了处理有趣的文件名，你也可以让 webpack 生成带有哈希值的合理名称。例如。在您的加载程序中，将 loader 选项设置为 -> loader: 'file?name=[name].[ext]?[hash:5]'

更新：如果您使用file-loader 插件，请忽略有关数据uri 的部分，如果使用file-loader webpack 正在执行某种重新映射。如果你不使用file-loader，那么它将使用数据uri方式来完成。但在这两种情况下你都使用require..

【讨论】：