升级webpack-dev-server v3至v4后资源404及assets文件夹缺失求助

一、修复升级webpack-dev-server v4后的资源404与目录缺失问题 #

webpack-dev-server v4对静态资源处理和配置结构做了调整，结合你的配置，需要做以下修改：

1. 指定资源输出路径（恢复assets/images目录） #

在webpack.common.js的资源规则中添加generator.filename，确保打包后的资源输出到原有的assets/images目录下：

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

module.exports = {
  entry: './src/app.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/template.html')
    })
  ],
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg|ico|pvr|mp3|fnt)$/,
        type: 'asset/resource',
        // 新增：指定资源输出路径，与原结构一致
        generator: {
          filename: 'assets/images/[name][ext]'
        }
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

2. 适配webpack-dev-server v4的devServer配置 #

修改webpack.dev.js中的devServer配置，添加static字段指定静态资源目录，并开启热重载：

const { merge } = require('webpack-merge');
const path = require('path');

const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    historyApiFallback: true,
    // 新增：配置静态资源访问路径
    static: {
      directory: path.resolve(__dirname, '../dist'),
      publicPath: '/'
    },
    // 开启热重载
    hot: true
  },
  output: {
    publicPath: '/'
  },
  devtool: "source-map"
});

二、解决热重载失效问题 #

热重载失效的核心原因是未正确启用热模块替换机制，补充以下配置：

1. 添加HotModuleReplacementPlugin #

在webpack.common.js的plugins数组中添加热重载插件：

plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, '../src/template.html')
  }),
  // 新增：启用热模块替换插件
  new webpack.HotModuleReplacementPlugin()
]

2. 确保依赖版本兼容 #

更新package.json中的webpack相关依赖版本，避免版本冲突：

"devDependencies": {
  // ...其他依赖保持不变
  "webpack": "^5.88.0",
  "webpack-cli": "^4.10.0",
  "webpack-dev-server": "^4.11.1"
}

三、最终操作步骤 #

1. 保存上述配置文件修改
2. 执行npm install重新安装依赖
3. 运行npm run dev启动开发服务器

此时应该能恢复原有的assets/images目录结构，且资源不再返回404，同时热重载功能正常生效。如果部分自定义模块仍不触发热重载，可以在对应模块末尾添加热接受代码：

if (module.hot) {
  module.hot.accept();
}

内容的提问来源于stack exchange，提问作者Rumthorp