現在我們來學習一個最常用的插件 `webpack-dev-server`，一般來說，這個插件，大家都會用，特別是開發環境下。 我們之前使用 `webpack -d --watch` 來在開發環境下編譯靜態文件，但是這個功能，完全可以用 `webpack-dev-server` 來代替。 除此之外， `webpack-dev-server` 還有其他的功能，比如在本地上開啟服務，打開瀏覽器等。 這節我們主要來簡單體驗一下 `webpack-dev-server` 的功能。 ``` bash # 先全局安裝 $ npm install -g webpack-dev-server $ npm install --save-dev webpack-dev-server ``` 然后運行命令： ``` bash $ webpack-dev-server ```  現在我們用瀏覽器打開 `localhost:8080` 也可以看到以前的效果。 下面是編譯后的源碼。  默認是運行在 `8080` 端口，這個我們可以改。 **webpack.config.js** ``` var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './src/app.js', ... devServer: { port: 9000 }, ... }; ``` 我們還可以配置一運行 `webpack-dev-server` 的時候就自動打開瀏覽器。 **webpack.config.js** ``` var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './src/app.js', ... devServer: { port: 9000, open: true }, ... }; ``` 以后都會一直用 `webpack-dev-server` 的啦。 先這樣吧。