最近正在研究webpack，聽(tīng)說(shuō)webpack可以自己搭建一個(gè)小型的服務(wù)器（使用過(guò)vue-cli的朋友應(yīng)該都見(jiàn)識(shí)到過(guò)），所以迫不及待的想要嘗試一下。不過(guò)，在實(shí)際操作中發(fā)現(xiàn)，用webpack搭建服務(wù)器仍有不少坑，一方面是由于自己對(duì)文檔的不熟悉，不了解webpack-dev-server的運(yùn)作模式；另一方面，在翻閱了不少博客和文章后，發(fā)現(xiàn)不少配置實(shí)際上都跑不起來(lái)（有可能是版本的原因，也有可能是我自己配置的原因）。所以我打算用webpack3.0把dev-server跑起來(lái)給大家演示一遍，順便把一些配置和原理給大家講清楚，這樣就省的繞彎路了。

這里我就默認(rèn)大家都已經(jīng)安裝了webpack以及自己需要使用的loader和plugins，由于webpack-dev-server是個(gè)獨(dú)立的npm包，所以我們需要在npm下安裝它：　

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

之后我們就可以在webpack.config.js中進(jìn)行配置：

const path = require("path");
module.exports = {
   entyr:{
      ....... //設(shè)置入口文件
   },
   output:{
      ....... //設(shè)置出口文件
   },
   module:{
      ....... //配置loader，注意使用rules而不是loaders
   },
   plugins:[
      ....... //注意是數(shù)組
   ],
   devServer:{
      //我們?cè)谶@里對(duì)webpack-dev-server進(jìn)行配置
   }        
}

devServer中常用的配置對(duì)象屬性如下：

1. contentBase："./" // 本地服務(wù)器在哪個(gè)目錄搭建頁(yè)面，一般我們?cè)诋?dāng)前目錄即可；

2. historyApiFallback：true // 當(dāng)我們搭建spa應(yīng)用時(shí)非常有用，它使用的是HTML5 History Api，任意的跳轉(zhuǎn)或404響應(yīng)可以指向 index.html頁(yè)面；

3. inline：true // 用來(lái)支持dev-server自動(dòng)刷新的配置，webpack有兩種模式支持自動(dòng)刷新，一種是iframe模式，一種是inline模式；使用iframe模式是不需要在devServer進(jìn)行配置的，只需使用特定的URL格式訪問(wèn)即可；不過(guò)我們一般還是常用inline模式，在devServer中對(duì)inline設(shè)置為true后，當(dāng)我們啟動(dòng)webpack-dev-server時(shí)仍要需要配置inline才能生效，這一點(diǎn)我們之后再說(shuō)；

4. hot：true // 啟動(dòng)webpack熱模塊替換特性，這里也是坑最多的地方，不少博客都將hot設(shè)置了true，我們姑且也設(shè)置為true，之后再看；

5. port：端口號(hào)(默認(rèn)8080) // 這就不用我多說(shuō)了吧；

事實(shí)上大概常用的配置也就這樣，為了方便，我們?cè)趐ackjson中對(duì)webpack-dev-server的的啟動(dòng)進(jìn)行一下設(shè)置：

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

別忘了在devServer中設(shè)置inline：true后這里也要設(shè)置一下！

這時(shí)我們打包后再運(yùn)行服務(wù)器后應(yīng)該發(fā)現(xiàn)index.html頁(yè)面已經(jīng)展示了，打包好后的js文件雖然出現(xiàn)在了src上，但并沒(méi)有顯示，打開(kāi)控制臺(tái)會(huì)發(fā)現(xiàn)如下報(bào)錯(cuò)：

控制臺(tái)顯示：Hot Module Replacement is disabled；

奇怪？我們之前不是在devServer中設(shè)置了hot為true了嗎？事實(shí)上，雖然不知道為什么，但是目前來(lái)說(shuō)hot這個(gè)屬性已經(jīng)沒(méi)有用了，使用熱模塊的話我們需要用到一個(gè)叫webpack.HotModuleReplacementPlugin的插件。所以我們的webpack.config.js需要加上這些：

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

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

這時(shí)我們?cè)僭赽ash上運(yùn)行npm run start后發(fā)現(xiàn)服務(wù)器就搭建完成了！

另外，還有一點(diǎn)值得注意的就是，webpack-dev-server所使用的bundle.js文件并不是webpack.config.js中output打包生成的bundle.js，而是使用webpack-dev-server自己打包生成的，這個(gè)文件不存在與output或其他路徑中，而是存到了內(nèi)存中，事實(shí)上webpack-dev-server所使用的那個(gè)bundle.js我們是看不到的！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論