webpack-dev-server 怎么使用
时间: 2024-02-17 17:53:38 浏览: 21
webpack-dev-server 是一个基于 Express.js 的开发服务器,可以帮助你在开发过程中快速构建和测试应用程序。
以下是 webpack-dev-server 的使用步骤:
1. 安装 webpack-dev-server:
```
npm install webpack-dev-server --save-dev
```
2. 在 webpack.config.js 中配置 webpack-dev-server:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
contentBase: './dist',
},
};
```
其中,`devServer` 对象用于配置 webpack-dev-server 的选项。`contentBase` 选项指定服务器提供静态文件的路径。
3. 在 package.json 中添加一个脚本:
```json
{
"scripts": {
"start": "webpack-dev-server --open"
}
}
```
这个脚本可以启动 webpack-dev-server,并在浏览器中打开你的应用程序。
4. 运行 `npm start`,开启 webpack-dev-server。
现在,你可以在浏览器中访问 http://localhost:8080,即可访问你的应用程序。webpack-dev-server 会实时监视你的代码变化,并重新构建和刷新浏览器。