一、概述
開發項目中為了保證上線，開發項目是都需要使用localhost進行開發，以前的做法就是本地搭建Apache或者Tomcat服務器。有的前端開發人員 對服務器的搭建和配置并不熟悉，這個時候需要后臺開發人員進行幫忙，有的時候后臺開發人員還愛答不理的。為了解決這個愛答不理的問題，webpack-dev-server出現了，它的出現告訴后臺開發人員，不用你們了。
webpack-dev-server的作用不只是搭建本地服務器，大家知道使用webpack可以 進行監聽和打包文件，但是如果文件比較多，webpack執行會非常的慢，webpack-dev-server就可以解決 慢的問題。另一方面，webpack-dev-server可以進行瀏覽器的實時刷新， 避免了修改代碼手動執行刷新功能。
webpack-dev-server其中部分功能就能克服上面的2個問題。webpack-dev-server主要是啟動了一個使用express的Http服務器。它的作用主要是用來伺服資源文件。此外這個Http服務器和client使用了websocket通訊協議，原始文件作出改動后，webpack-dev-server會實時的編譯。
注意：啟動webpack-dev-server后，在目標文件夾中是看不到編譯后的文件的,實時編譯后的文件都保存到了內存當中。因此很多同學使用webpack-dev-server進行開發的時候都看不到編譯后的文件。
二、webpack-dev-server 安裝
由于webpack-dev-server和webpack不是一個資源包，所以，需要單獨安裝webpack-dev-server資源包：
全局安裝
npm?install?webpack-dev-server?－g
項目安裝
npm?install?webpack-dev-server?--save-dev
這里建議進行項目安裝，這樣別人開發的時候只需要執行npm install 命令就能安裝了，沒有必須單獨進行 全局安裝了。
三、webpack-dev-server 服務器
首先我們看一下 都有哪些參數可選項：
--content-base?//設定webpack-dev-server的director根目錄。如果不進行設定的話，默認是在當前目錄下。
--quiet:?//控制臺中不輸出打包的信息，開發中一般設置為false，進行?打印，這樣查看錯誤比較方面
--no-info:?//?不顯示任何信息
--colors:?//對信息進行顏色輸出
--no-colors:?//對信息不進行顏色輸出
--compress:??//開啟gzip壓縮
--host?<hostname/ip>:?//設置ip
--port?<number>:?//設置端口號，默認是:8080
--inline:?//webpack-dev-server會在你的webpack.config.js的入口配置文件中再添加一個入口,
--hot:?//開發熱替換
--open:?//啟動命令，自動打開瀏覽器
--history-api-fallback:?//查看歷史url
?
這里只是列舉一下常用了的，相關的參數可以查看：http://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli
1、content-base
設定webpack-dev-server的根目錄。如果不進行設定的話，默認是在當前目錄下。
webpack-dev-server?--content-base?./assets
這個時候還要注意的一點就是在webpack.config.js文件里面，如果配置了output的publicPath這個字段的值的話，在index.html文件里面也應該做出調整。因為webpack-dev-server的根目錄是相對publicPath這個路徑的。因此，如果你的webpack.config.js配置成這樣的：
?module.exports?=?{entry:?'./src/js/index.js',output:?{path:?'./dist/js',filename:?'bundle.js'，publicPath:?'/assets/'}}
那么，在index.html文件當中引入的路徑也發生相應的變化:
????<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><title>Demo</title></head><body><script?src="assets/bundle.js"></script></body></html>
如果在webpack.config.js里面沒有配置output的publicPath的話，那么index.html最后引入的文件js文件路徑應該是下面這樣的。
????<!DOCTYPE?html><html?lang="en"><head><meta?charset="UTF-8"><title>Demo</title></head><body><script?src="bundle.js"></script></body></html>
?
直接在命令行執行一下命令，就可以啟動服務器：
webpack-dev-server?--content-base?./assets
四、webpack-dev-server 的熱替換
webpack-dev-server支持2種自動刷新的方式：
1、Iframe mode
Iframe mode刷新模式是在網頁中嵌入了一個iframe，將我們自己的應用注入到這個iframe當中去，因此每次你修改的文件后，都是這個iframe進行了reload。
啟動Iframe mode刷新模式直接使用命令就可以啟動了：
webpack-dev-server?--content-base?./dist
瀏覽器訪問的路徑是:
localhost:8080/webpack-dev-server/index.html。
2、Inline-mode
Inline-mode刷新模式是直接刷新頁面，不會在頁面增減任何的元素或者js插件，它是直接放在內存中，這種方式也是官方推薦的，并且速度相對來說比較快。實現Inline-mode刷新模式 有很多的方法，下面我們來列舉一下：
方法一：將代碼內聯到入口配置文件webpakc.config.js文件entry屬性里面，并且添加new webpack.HotModuleReplacementPlugin()熱點插件
var?webpack?=?require('webpack');
var?WebpackDevServer?=?require("webpack-dev-server");module.exports?=?{//項目的文件夾?可以直接用文件夾名稱?默認會找index.js?，也可以確定是哪個文件名字entry:?['webpack-dev-server/client?http://localhost:8080/','./src/index.js'],//輸出的文件名,合并以后的js會命名為bundle.jsoutput:?{path:?path.join(__dirname,?"dist/"),publicPath:?"http://localhost:8088/dist/",filename:?"bundle.js"},plugins:?[new?webpack.HotModuleReplacementPlugin()]
};
這種方式比較容易，但是不夠靈活，需要添加相關的熱點插件。
?
?
方法二、直接在你index.html引入這部分代碼:
<script?src="http://localhost:8080/webpack-dev-server.js"></script>
這種方法更不好，項目上線還需要手動刪除，堅決杜絕這些方法。
方法三、
直接實現一個server.js，啟動服務器(需要啟動熱替換plugin)
var?webpack?=?require('webpack');
var?webpackDevMiddleware?=?require("webpack-dev-middleware");
var?webpackDevServer?=?require('webpack-dev-server');
var?config?=?require("./webpack.config.js");config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000");?//?將執替換js內聯進去
config.entry.index.unshift("webpack/hot/only-dev-server");var?compiler?=?webpack(config);
var?server?=?new?webpackDevServer(compiler,?{hot:?true,historyApiFallback:?false,//?noInfo:?true,stats:?{ colors:?true?//?用顏色標識},proxy:?{ "*":?"http://localhost:9000"?//?用于轉發api數據，但webpack自己提供的并不太好用},
});
server.listen(9000);
?
方法四、
? ? ?直接在webpack.config.js上配置。這個辦法最簡單，當然靈活性沒有自己實現一個服務器好。
var?webpack?=?require('webpack');
var?WebpackDevServer?=?require("webpack-dev-server");
var?path?=?require('path');
var?CURRENT_PATH?=?path.resolve(__dirname);?//?獲取到當前目錄
var?ROOT_PATH?=?path.join(__dirname,?'../');?//?項目根目錄
var?MODULES_PATH?=?path.join(ROOT_PATH,?'./node_modules');?//?node包目錄
var?BUILD_PATH?=?path.join(ROOT_PATH,?'./dist');?//?最后輸出放置公共資源的目錄//用于提取多個入口文件的公共腳本部分，然后生成一個?common.js?來方便多頁面之間進行復用
var?commonsPlugin?=?new?webpack.optimize.CommonsChunkPlugin('common.js');module.exports?=?{//項目的文件夾?可以直接用文件夾名稱?默認會找index.js?，也可以確定是哪個文件名字entry:?['./src/index.js'],//輸出的文件名,合并以后的js會命名為bundle.jsoutput:?{path:?path.join(__dirname,?"dist/"),publicPath:?"http://localhost:8088/dist/",filename:?"bundle.js"},devServer:?{historyApiFallback:?true,contentBase:?"./",quiet:?false,?//控制臺中不輸出打包的信息noInfo:?false,hot:?true,inline:?true,lazy:?false,progress:?true,?//顯示打包的進度watchOptions:?{aggregateTimeout:?300},port:?'8088'}
};
五、配置webpackDemo項目本地 服務器
上面我們講解了webpack-dev-server 搭建本地服務以及瀏覽器實時刷新的相關方法和配置，我們選擇方法四 直接在webpack.config.js使用devServer配置服務器以及熱點替換。內容如下：
var?webpack?=?require('webpack');
var?WebpackDevServer?=?require("webpack-dev-server");
var?path?=?require('path');
var?CURRENT_PATH?=?path.resolve(__dirname);?//?獲取到當前目錄
var?ROOT_PATH?=?path.join(__dirname,?'../');?//?項目根目錄
var?MODULES_PATH?=?path.join(ROOT_PATH,?'./node_modules');?//?node包目錄
var?BUILD_PATH?=?path.join(ROOT_PATH,?'./dist');?//?最后輸出放置公共資源的目錄//用于提取多個入口文件的公共腳本部分，然后生成一個?common.js?來方便多頁面之間進行復用
var?commonsPlugin?=?new?webpack.optimize.CommonsChunkPlugin('common.js');module.exports?=?{//項目的文件夾?可以直接用文件夾名稱?默認會找index.js?，也可以確定是哪個文件名字entry:?['./src/index.js'],//輸出的文件名,合并以后的js會命名為bundle.jsoutput:?{path:?path.join(__dirname,?"dist/"),publicPath:?"http://localhost:8088/dist/",filename:?"bundle.js"},devServer:?{historyApiFallback:?true,contentBase:?"./",quiet:?false,?//控制臺中不輸出打包的信息noInfo:?false,hot:?true,inline:?true,lazy:?false,progress:?true,?//顯示打包的進度watchOptions:?{aggregateTimeout:?300},port:?'8088'}
};
?這個時候index.html內容如下：
<!DOCTYPE?html>
<html?lang="en">
<head><meta?charset="UTF-8"><title>Document</title><script?src="dist/bundle.js"></script>
</head>
<body>
<h1>welcome?to?68kejian.com</h1>
</body>
</html>
?
然后在命令行執行一下操作啟動 服務：
webpack-dev-server?--hot?--inline
?在瀏覽器輸入:localhost:8088, 這里我們設置的端口號是:8088
這個時候隨意修改login.js的userName的值，看看頁面是不是刷新了。
轉載于:https://www.cnblogs.com/liuchuanfeng/p/6802582.html
總結
以上是生活随笔為你收集整理的webpack-dev-server 搭建本地服务以及浏览器实时刷新的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
