我們之前一直都在用live-server充當本地服務器，其實它和webpack是不搭的，我們可以利用webpack自帶的webpack-dev-server來構建一個本地服務器。它讓你的瀏覽器檢測你的代碼修改，并自動刷新修改后的結果，它是基于node.js構建。webpack-dev-server是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作為項目依賴。 1. 安裝webpack-dev-server 本地依賴 ~~~ npm install --save-dev webpack-dev-server ~~~ 全局安裝 ~~~ npm install -g webpack-dev-server ~~~ 2. 在webpack.config.js中配置devserver選項： * contentBase : 默認webpack-dev-server會為根文件夾提供本地服務器，如果想為另外一個目錄下的文件提供本地服務器，應該在這里設置其所在目錄。 * port ：設置默認監聽端口，如果省略，默認為”8080″ * inline : 設置為true，當源文件改變時會自動刷新頁面 * colors ： 設置為true，使終端輸出的文件為彩色的 * historyApiFallback ：在開發單頁時非常有用，它依賴于HTML5 history API，如果設置為true，所有的跳轉將指向index.html * host ： 主機地址，如果是開發本機搭建，需要使用本機IP地址，否則會報錯。 配置文件如下： ~~~ module.exports = { entry: __dirname + '/main.js', output: { path: __dirname + '/', filename: 'bundle.js' }, devServer: { contentBase: './', //本地服務器所加載的頁面所在的目錄 host: '192.168.1.158', //本地IP地址 colors: true, //終端輸出結果為彩色 historyApiFallback: true, //不跳轉 inline: true, //實時刷新 port: '3333' //端口號 } } ~~~ 3. 在終端中輸入命令，開啟運行本地服務器。它不僅提供了服務器，還會監視我們的文件變化自動更新效果，但是它不是真正的打包，它類似于在內存中進行了打包。所以本地文件并沒有變化 ~~~ webpack-dev-server ~~~ 其實webpack構建服務器才是正道，如果你使用了webpack，那么盡量使用webpack-dev-server吧，這能大大提高您的工作效率