Почему я получаю хэшированный файл .jpeg при запуске npm run build с веб-пакетом

Question

Я новый новичок в разработке приложения реакции.Я пытаюсь выяснить, как настроить мой файл 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

Это потому, что url-loader имеет откат по умолчанию до file-loader.Таким образом, если ваше изображение больше установленного вами предела для url-loader, оно не переписывает изображение в данные base64: изображение в вашем css, вместо этого присваивает ему значение file-loader и копирует это изображение в вашу папку dist (выводпуть).

Так что, если вы этого не хотите, отключите опцию отката для url-loader

Но я также думаю, что вы должны настроить свой веб-пакет для правильного копирования файлов с file-loaderвместо этого плагин копирования.Но вы знаете ...

Я бы привел вам пример, основанный на вашей конфигурации, но я в настоящее время на мобильном телефоне, поэтому я не могу сейчас кодировать.

Answer 2

Я бы предложил вместо 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 file-loader