webpack-dev-server

发表于 | 分类于

webpack-dev-server

将webpack与提供实时重新加载的开发服务器一起使用。仅能用于开发环境。
它使用了 webpack-dev-middleware under the hood，提供了对webpack资源的快速访问内存。
启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

安装此模块

1
npm install webpack-dev-server --save-dev

使用

使用 CLI

在与webpack.config.js同一个目录文件夹下运行

1
node_modules/.bin/webpack-dev-server

使用 NPM Scripts

1
2
3
"scripts": {
  "start:dev": "webpack-dev-server"
}

And run the following in your terminal/console:

1
npm run start:dev

NPM将自动为您引用node_modules中的bin文件，并且执行文件或命令。

结果

以上两种方法都会启动一个服务实例，并开始监听连接默认端口为8080的localhost
webpack-dev-server默认配置为支持文件的实时重新加载，这样当你修改你的文件时页面会自动刷新。

可以在webpack.config.js中配置

1
2
3
4
5
devServer: {
  port: 9001,
  publicPath: 'http://127.0.0.1:9001/assets/',
  open: true,
}

参考
官方GitHub
官方文档