为什么使用Webpack运行'npm run build'时会散列.jpeg文件

Question

我是开发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" }])
  ]
};

Answer 1

我建议不要使用 file-loader 复制图像

，而不要使用 copy-webpack-plugin

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

如果要哈希而不是名称

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

包装

  

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

Answer 2

这是因为url-loader到file-loader的范围是default fallback。因此，如果您的图片大于您为url-loader设置的限制，它不会将图片重写为css中的base64 data：image，而是将其提供给file-loader并将其复制到您的dist文件夹（输出路径）。

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

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

我会给您一个基于您的配置的示例，但我目前在移动设备上，因此我现在无法编写代码。