为什么我在使用 webpack 运行“npm run build”时得到散列的 .jpeg 文件答案

【问题标题】：Why i get hashed .jpeg file when running 'npm run build' with webpack为什么我在使用 webpack 运行“npm run build”时得到散列的 .jpeg 文件
【发布时间】：2018-10-09 16:54:51
【问题描述】：

我是开发 React 应用程序的新手。我试图弄清楚如何设置我的 webpack.config.js 文件。

正如您在下面的图片链接中看到的那样，我已经完成了这个结构。

我的问题是：当我运行 'npm run build' 时，它会散列图片并将其放入 /dist 文件夹。我怎样才能配置它不呢？

因为我使用 copyWebpackPlugin() 来复制我的图像并将其推送到 dist 文件夹，但我不想要我用箭头标记的图片。

如果有人有什么建议，请提出来。

这就是我的 webpack.config.js 文件的样子：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader"
      },
      {
        test: /\.s?css$/,
        loader: ["style-loader", "css-loader"]
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: "url-loader?limit=100000"
      }
    ]
  },
  resolve: { extensions: [".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    filename: "bundle.js"
  },
  devtool: "cheap-module-eval-source-map",
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    proxy: {
      "/api/*": {
        target: "http://localhost:3000/",
        secure: "true"
      }
    },
    port: 4000,
    publicPath: "http://localhost:4000/dist/",
    hotOnly: true,
    historyApiFallback: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./public/index.html"
    }),
    new CopyWebpackPlugin([{ from: "public/images", to: "images" }])
  ]
};

【问题讨论】：

为什么你不想在你的图片上散列？
当我加载我的应用程序时，它不会显示图片：/ 我已将其添加到我的 /styles/App.css 中，我将 CSS 导入到 'index.js' 中。这是我在 App.css -> 背景中添加的： url('/images/developer.jpeg') no-repeat; .但是对于我使用 CopyWebpackHtmlPlugin 进行复制的解决方案，我只是复制了图像然后它就可以工作了。也许我做错了什么？
如果你尝试：url('relative/path/to/images/developer.jpeg')？
对不起，但我不确定你说 relative/path/to 是什么意思？你的意思是？ 'src/images/developer.jpg' ?
相对路径。从您所在位置到图像所在位置的相对路径。

标签： reactjs webpack

【解决方案1】：

我建议代替 copy-webpack-plugin 使用 file-loader 来复制图像

 {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: 'images/[name].[ext]',
                    }
                }]
            }

如果你想要 hash 而不是名称

name: 'images/[hash].[ext]',

包

npm install --save-dev 文件加载器

【讨论】：

我尝试了这个选项，仍然失败并显示此消息 -> GET localhost:4000/images/developer.jpeg 404 (Not Found) 。在 webpack 中，我删除了 url-loader 并使用了你给我的代码。在 App.css 我更改为背景： url('../images/developer.jpeg') no-repeat; ，并且在 App.js 中我已经导入了图片-> import '../images/developer.jpeg'; .我还将图像文件夹移动到 /src 文件夹
@mac123 完全同意这个答案，但你的问题是“为什么？”我的回答解释了。

【解决方案2】：

这是因为url-loader 有一个default fallback 到file-loader。因此，如果您的图像大于您为url-loader 设置的限制，它不会将图像重写为 CSS 中的 base64 数据：图像，而是将其提供给file-loader 并将该图像复制到您的 dist 文件夹（输出路径）。

因此，如果您不希望这样做，请禁用 url-loader 的后备选项

但我也认为你应该配置你的 webpack 以正确地使用 file-loader 复制文件，而不是使用复制插件。但是你知道...

我会根据你的配置给你一个例子，但我目前在移动设备上，所以我现在不能编码。

【讨论】：