下面给大家讲讲如何使用webpack-dev-server搭建本地开发服务器并实现实时重载，具体步骤如下：
webpack-dev-server首先，在项目中安装webpack-dev-server，可以使用npm安装，命令为：
npm install webpack-dev-server --save-dev
webpack-dev-server在webpack的配置文件中添加devServer属性，示例如下：
module.exports = {
// ... 其他配置
devServer: {
contentBase: path.join(__dirname, "dist"), // 指定服务器文件的根目录
compress: true, // 开启gzip压缩
port: 8080, // 指定服务器的端口
open: true, // 自动打开浏览器
},
};
其中，contentBase表示webpack-dev-server开启的服务器的根目录。compress表示开启gzip压缩。port表示服务器使用的端口，open表示自动打开浏览器。
webpack-dev-server在命令行中输入以下命令启动webpack-dev-server：
npx webpack-dev-server --config webpack.config.js
其中，webpack.config.js为你的webpack配置文件。运行成功后，会自动打开浏览器，显示你的页面。
以下是一个简单的配置示例：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
open: true
}
};
其中，入口文件为./src/index.js，输出文件为./dist/main.js。开启webpack-dev-server后，服务器的文件根目录为./dist，使用的端口为9000，并在浏览器中自动打开页面。
另一个示例如下：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
compress: true,
port: 8080,
hot: true
},
module: {
rules: [
// ... 其他规则
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
该示例中，入口文件为./src/index.js，输出文件为./dist/bundle.js。开启webpack-dev-server后，服务器的文件根目录为项目根目录下的./dist目录，使用的端口为8080。还在配置文件中添加了一个css-loader，用于处理CSS文件。此外还开启了热更新，即在修改代码后页面不刷新即可看到修改效果。
以上是使用webpack-dev-server在本地搭建服务器的完整攻略，希望对您有所帮助。
本文链接：http://task.lmcjl.com/news/8781.html