Webpack 4中webpack-dev-server的替代方案及热加载服务配置咨询

嘿，我来帮你理清这个问题～首先得纠正下你之前的安装误区：你输入的webpack-dev-server@webpack/webpack#next其实是个错误的包名写法——@webpack/webpack是Webpack官方的核心包，而webpack-dev-server是完全独立的另一个工具包，你这相当于误装了Webpack的预览版，自然找不到webpack-dev-server的可执行文件啦。

回到你的核心需求：在Webpack 4里快速搭建带热重载的开发服务器，同时支持原生.mjs模块，下面给你两种官方推荐的方案：

方案一：继续使用webpack-dev-server（最便捷） #

Webpack 4对应的webpack-dev-server版本是3.x系列（因为4.x版本的webpack-dev-server只适配Webpack 5），你只要正确安装适配版本就能恢复之前的便捷体验：

1. 安装适配的依赖

npm install --save-dev webpack-dev-server@3

2. 配置Webpack支持热重载与.mjs模块
   在你的webpack.config.js中添加以下配置：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  // 入口添加热重载相关客户端脚本
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.mjs' // 你的原生.mjs入口文件
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 让Webpack识别.mjs后缀的文件
  resolve: {
    extensions: ['.mjs', '.js']
  },
  plugins: [
    // 启用热模块替换插件
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 指定静态文件目录
    hot: true, // 开启热重载
    open: true // 可选，启动时自动打开浏览器
  }
};

3. 添加启动脚本
   在package.json的scripts里加入：

"scripts": {
  "start": "webpack-dev-server"
}

之后运行npm start就能启动带热重载的开发服务器了，和你之前的使用体验一致。

方案二：自定义开发服务器（更灵活） #

如果需要自定义服务器逻辑（比如添加API接口），可以用webpack-dev-middleware搭配express来搭建，同样支持热重载：

1. 安装依赖

npm install --save-dev webpack-dev-middleware express webpack-hot-middleware

2. 创建自定义服务器文件server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');

const app = express();
const compiler = webpack(config);

// 挂载Webpack开发中间件
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath || '/'
}));

// 挂载热重载中间件
app.use(webpackHotMiddleware(compiler));

// 提供静态文件服务
app.use(express.static('dist'));

// 启动服务器
app.listen(8080, () => {
  console.log('开发服务器已启动：http://localhost:8080');
});

3. 调整Webpack配置的入口
   把webpack.config.js里的entry改成：

entry: [
  'webpack-hot-middleware/client',
  './src/index.mjs'
]

4. 添加启动脚本
   在package.json里加入：

"scripts": {
  "start": "node server.js"
}

总结 #

Webpack 4里并不需要放弃便捷的热重载开发服务器：

• 追求快速上手的话，优先选webpack-dev-server@3.x，和你之前的使用习惯完全兼容；
• 需要自定义服务器逻辑时，用webpack-dev-middleware + express的组合更灵活。

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