webpack 3 零基礎入門教程 #7 - 初識 webpack-dev-server

如今咱們來學習一個最經常使用的插件 webpack-dev-server，通常來講，這個插件，你們都會用，特別是開發環境下。

咱們以前使用 webpack -d --watch 來在開發環境下編譯靜態文件，可是這個功能，徹底能夠用 webpack-dev-server 來代替。

除此以外， webpack-dev-server 還有其餘的功能，好比在本地上開啓服務，打開瀏覽器等。

這節咱們主要來簡單體驗一下 webpack-dev-server 的功能。

# 先全局安裝 $ npm install -g webpack-dev-server $ npm install --save-dev webpack-dev-server 

而後運行命令：

$ 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 的啦。