webpack-dev-server

 

原文出自 https://www.cnblogs.com/penghuwan/p/6941616.html
用最簡單的方式搭建一個服務器
npm install webpack-dev-server --save-dev，

默認是localhost:8080端口，若是bundle.js找不到？

var webpack = require('webpack')
var path =require('path')
module.exports = {
  entry:{
     app:path.join(__dirname,'src','index.js')
  },
  output:{
     filename:'bundle.js',
     path:path.join(__dirname,'dist')
  }，
  devServer: {
       contentBase: path.join(__dirname, "dist")
   }
}

詳解webpack-dev-server的配置屬性 

contentBase：它指定了服務器資源的根目錄，若是不寫入contentBase的值，那麼contentBase默認是項目的目錄。

　　產生錯誤：由於bundle.js被 "放在了"咱們的項目根目錄裏，在dist/html裏<script src="./bundle.js"></script>此時顯然不能根據路徑找到bundle.js

　　解決錯誤：經過配置contentBase: path.join(__dirname, "dist")將bundle.js "放在了"dist目錄下，此時bundle.js和dist/index.html位於同一目錄下，經過 src="./bundle.js"天然就找到bundle.js了

webpack打包和webpack-dev-server開啓服務的區別——

webpack輸出真實的文件，而webpack-dev-server輸出的文件只存在於內存中,不輸出真實的文件！

webpack:當咱們在終端運行"webpack"後：

當咱們在終端運行"node_modules/.bin/webpack-dev-server後

2. port配置屬性指定了開啓服務的端口號：

devServer: {
   port:7000
}

3.host設置的是服務器的主機號：

devServer: {
   contentBase: path.join(__dirname, "dist"),
   port:7000,
   host:'0.0.0.0'
}

此時訪問 0.0.0.0:7000就能夠訪問項目了

4.historyApiFallback，這個配置屬性是用來應對返回404頁面時定向到特定頁面用的

增長一個訪問錯誤的404頁面

historyApiFallback:{
    rewrites:[
        {from:/./,to:'/404.html'}
    ]
}    

5.overlay 這個配置屬性用來在編譯出錯的時候，在瀏覽器頁面上顯示錯誤，默認是false，可設置爲true

6.stats   這個配置屬性用來控制編譯的時候shell上的輸出內容 , stats: "errors-only"表示只打印錯誤： 

7.quiet  當這個配置屬性和devServer.stats屬於同一類型的配置屬性  ，當它被設置爲true的時候，控制檯只輸出第一次編譯的信息，當你保存後再次編譯的時候不會輸出任何內容，包括錯誤和警告

8.compress  這是一個布爾型的值，當它被設置爲true的時候對全部的服務器資源採用gzip壓縮

採用gzip壓縮的優勢和缺點：

優勢：對JS，CSS資源的壓縮率很高，能夠極大得提升文件傳輸的速率，從而提高web性能

缺點：服務端要對文件進行壓縮，而客戶端要進行解壓，增長了兩邊的負載

9.devServer.hot和devServer.inline

在這以前，首先要說一下的是webpack-dev-server的自動刷新和模塊熱替換機制

webpack-dev-server有兩種模式能夠實現自動刷新和模塊熱替換機制

1. Iframe mode (默認,無需配置)

頁面被嵌入在一個iframe裏面，而且在模塊變化的時候重載頁面

2.inline mode（需配置）添加到bundle.js中

當刷新頁面的時候，一個小型的客戶端被添加到webpack.config.js的入口文件中

inline mode模式的刷新

1在配置中寫入devServer.hot：true和devServer.inline：true

2增長一個插件配置webpack.HotModuleReplacementPlugin()

var webpack = require('webpack')
module.exports = {
/*省略entry ,output等內容*/
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        inline:true,
        hot:true
    }
}        

　　

如今還有一個問題，那就是每次直接輸入node_modules/.bin/webpack-dev-server來啓動服務器對咱們來講簡直就是莫大的痛苦，那麼怎麼對這一過程進行簡化呢？

答案：把運行腳本寫到package.json裏！

{
   "name": "webpackTest2",
   "dependencies": {},
   "devDependencies": {},
   "scripts": {
       "start": "node_modules/.bin/webpack-dev-server"
     }
}

在終端運行npm start便可運行成功!

配置服務的三種方式

1在webpack.config.js輸出對象中的devServer屬性中寫配置（也就是咱們上述全部例子的作法）

2寫在package.json中，寫在node 命令對應的腳本中，例如咱們能夠寫成：

"scripts": {

"start": "node_modules/.bin/webpack-dev-server --port 8000 --inline true "

}

(但這顯然並非一個值得推薦的方式)

3使用純node的API實現，下面是一個官方給的例子

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
       /*咱們寫入配置的地方*/
});
server.listen(8080);