本文详细讲解 webpack-dev-server 的安装、基础配置及高级功能。涵盖如何设置开发环境、启用热模块替换（HMR）、配置本地主机访问及错误覆盖显示，并结合 html-webpack-plugin 实现自动化页面生成，帮助开发者搭建高效的本地开发环境。
本文介绍 webpack-dev-server 的配置方法与实际使用场景，供参考学习。
安装 webpack-dev-server
1. 安装 webpack-dev-server
在终端执行以下命令进行安装：
npm i webpack-dev-servernpm i webpack-dev-server
2. 配置 dev-server
配置 dev-server
在 package.json 文件的 scripts 字段中添加启动脚本。
"dev":"WebPack-dev-server --config webpack.config.js” 同时，在 webpack.config.js 文件中添加全局配置项。
target:"web" 终端执行以下命令以安装环境变量处理工具：
npm i cross-envnpm i cross-env
配置环境变量以区分开发与生产环境。
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"在 webpack.config.js 文件中添加相关判断语句。
const isDev = process.env.NODE_ENV ==='development' 通过判断 isDev 变量是否等于 'development' 来区分环境。
将 module.exports 修改为基于常量的配置对象，并添加相应逻辑。
module.exports = config此举便于后续灵活更改配置参数。
在 webpack.config.js 中添加具体的服务器配置代码。
if（isDev）{
config.devtool =“＃廉价模块-EVAL-源映射”//代码映射
config.devServer = {
port:8000,//启动服务监听端口
host:'0.0.0.0'，//可以通过localhost访问
overlay:{//在页面上显示错误信息
errors：true，
},
open:true，//启动webpack-dev-server时自动打开浏览器
hot:true //启用热更
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin()，
new webpack.NoEmitOnErrorsPlugin()//热更相关插件
)
}
创建 HTML 页面
3. 创建 HTML 页面
终端执行以下命令安装 html-webpack-plugin 插件：
npm i html-webpack-pluginnpm i html-webpack-plugin
在 webpack.config.js 中引入并配置该插件。
const HTMLPlugin = require('html-webpack-plugin')完成上述配置后，在终端运行构建命令。
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
npm run dev
npm run dev打包完成后，打开浏览器访问 localhost:8000 即可进入页面。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。