webpack-dev-server配置指南（使用webpack3.0）

最近正在研究webpack，據說webpack能夠本身搭建一個小型的服務器（使用過vue-cli的朋友應該都見識到過），因此火燒眉毛的想要嘗試一下。不過，在實際操做中發現，用webpack搭建服務器仍有很多坑，一方面是因爲本身對文檔的不熟悉，不瞭解webpack-dev-server的運做模式；另外一方面，在翻閱了很多博客和文章後，發現很多配置實際上都跑不起來（有多是版本的緣由，也有多是我本身配置的緣由）。因此我打算用webpack3.0把dev-server跑起來給你們演示一遍，順便把一些配置和原理給你們講清楚，這樣就省的繞彎路了。

　　

這裏我就默認你們都已經安裝了webpack以及本身須要使用的loader和plugins，因爲webpack-dev-server是個獨立的npm包，因此咱們須要在npm下安裝它：　

npm install webpack-dev-server --save-dev

 

以後咱們就能夠在webpack.config.js中進行配置：

const path = require("path");
module.exports = {
     entyr:{
           .......  //設置入口文件
     },
     output:{
           .......  //設置出口文件
     },
     module:{
           .......  //配置loader，注意使用rules而不是loaders
     },
     plugins:[
           .......  //注意是數組
     ],
     devServer:{
           //咱們在這裏對webpack-dev-server進行配置
     }                
}

devServer中經常使用的配置對象屬性以下：

1. contentBase："./" // 本地服務器在哪一個目錄搭建頁面，通常咱們在當前目錄便可；

2. historyApiFallback：true // 當咱們搭建spa應用時很是有用，它使用的是HTML5 History Api，任意的跳轉或404響應能夠指向 index.html 頁面；

3. inline：true // 用來支持dev-server自動刷新的配置，webpack有兩種模式支持自動刷新，一種是iframe模式，一種是inline模式；使用iframe模式是不須要在devServer進行配置的，只需使用特定的URL格式訪問便可；不過咱們通常仍是經常使用inline模式，在devServer中對inline設置爲true後，當咱們啓動webpack-dev-server時仍要須要配置inline才能生效，這一點咱們以後再說；

4. hot：true // 啓動webpack熱模塊替換特性，這裏也是坑最多的地方，很多博客都將hot設置了true，咱們姑且也設置爲true，以後再看；

5. port：端口號(默認8080) // 這就不用我多說了吧；

事實上大概經常使用的配置也就這樣，爲了方便，咱們在packjson中對webpack-dev-server的的啓動進行一下設置：

"scripts": {
    ......
    ......
    "start":"webpack-dev-server --inline"
  },

別忘了在devServer中設置inline：true後這裏也要設置一下！

這時咱們打包後再運行服務器後應該發現index.html頁面已經展現了，打包好後的js文件雖然出如今了src上，但並無顯示，打開控制檯會發現以下報錯：

控制檯顯示：Hot Module Replacement is disabled；

奇怪？咱們以前不是在devServer中設置了hot爲true了嗎？事實上，雖然不知道爲何，可是目前來講hot這個屬性已經沒有用了，使用熱模塊的話咱們須要用到一個叫webpack.HotModuleReplacementPlugin的插件。因此咱們的webpack.config.js須要加上這些：

const path = require("path");
const webpack = requier ("webpack");

module.exports = {
     entyr:{
           .......  //設置入口文件
     },
     output:{
           .......  //設置出口文件
     },
     module:{
           .......  //配置loader，注意使用rules而不是loaders
     },
     plugins:[
          new webpack.HotModuleReplacementPlugin()
           .......  //注意是數組
     ],
     devServer:{
          contentBase: "./", 
      historyApiFallback:true,
      inline:true,
      hot:true
     }                
}

 這時咱們再在bash上運行npm run start後發現服務器就搭建完成了！

 

另外，還有一點值得注意的就是，webpack-dev-server所使用的bundle.js文件並非webpack.config.js中output打包生成的bundle.js，而是使用webpack-dev-server本身打包生成的，這個文件不存在與output或其餘路徑中，而是存到了內存中，事實上webpack-dev-server所使用的那個bundle.js咱們是看不到的！