Webpack，图像在 css 更改后消失，使用 webpack-dev-server

Question

我的 Webpack 配置有问题。写入标签后，图像出现，但 devServer 在页面重新加载后立即删除样式应用程序后的所有图片。在标记中再次添加路径之前它不会返回。 See this screenshot video to have a better image of what is happening.

webpack.config.js:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

let mode = 'development'
let target = 'web'
if (process.env.NODE_ENV === 'production') {
  mode = 'production'
  target = 'browserslist'
}

const plugins = [
  new HtmlWebpackPlugin({
    template: './index.html',
  }),
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css',
  }),
]

module.exports = {
  mode,
  plugins,
  target,
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: './main.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'assets/[hash][ext][query]',
    clean: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'src'),
    },
    compress: true,
    open: true,
    hot: true,
    port: 3001,
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: ['html-loader'],
      },
      {
        test: /\.(s[ac]|c)ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
        type: mode === 'production' ? 'asset' : 'asset/resource',
      },
      {
        test: /\.(woff2?|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        },
      },
      {
        test: /\.(ts|tsx)?$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
        },
      },
    ],
  },
}

Answer 1

新答案：

将我的 webpack-dev-server 版本从 v3.11.2 升级到 v4.9.1 后问题就解决了。

Depending on your preview version, there may be some changes to be made to devServer entry in webpack.config.js. See the doc if you have errors.

为此，devServer 的静态目录应与 Webpack 的输出目录相同。对于问题，应该是 dist 而不是 src.

You may need to use HtmlWebpackPlugin to serve an index.html in the output folder if you are not already.

devServer: {
  static: {
    directory: path.join(__dirname, "dist"),
  },
  // ....
},

旧答案：

我也有同样的问题。我意识到使用 import 导入到 JavaScript 文件中的图像工作正常。问题来自 HTML 文件中的图像，使用 html-loader 处理。我搜索了很多，没有找到为什么会这样，但这里有一个方法可以避免这个问题：

Every time you add a new image, stop your development server, run npm run build or whatever the command you use to build your project. Then run npm start. After that, it works fine.

Webpack，图像在 css 更改后消失，使用 webpack-dev-server

Webpack, images disappear after css changes, using webpack-dev-server

javascript

node.js

webpack

新答案：

旧答案：