文章目錄

• webpack-dev-server
• webpack-dev-server作用
• 新增webpack-dev-server
• 修改原始碼
• 執行結果

webpack-dev-server

webpack-dev-server作用

  我們在修改了專案程式碼以後需要不斷的重新執行webpack命令，重新打包然後回到瀏覽器去重新整理頁面，這種開發效率很低下，所以說為了省去這部分沒必要的操作，因而我們在這裡要使用webpack-dev-server來實現當代碼更新時專案的自動打包釋出，重新整理瀏覽器頁面的操作。

  這一篇文章是在上一篇文章原始碼的基礎上寫出來的，所以說在原始碼部分可以參考上一篇文章。

• 利用webpack打包其它資原始檔

新增webpack-dev-server

  webpack-dev-server需要的依賴為webpack-dev-server和html-webpack-plugin，其中webpack-dev-server又依賴於webpack，因而我們要在package.json中新增這三個依賴項。

修改原始碼

  site.css原始碼：

  在site.css中新增如下程式碼，該程式碼的意識是新增背景圖片，而該圖片的大小大於20KB。這樣圖片就不會以base64

#bg1{
    width:450px;
    height:675px;
    background-image: url("../imgs/jpg/girl.jpg");
}

  index.html原始碼：

  在其中新增如下程式碼用來展示圖片：

<div id="bg1"></div>

  同時刪除如下程式碼，因為此時專案的頁面資源路徑將會以熱載入的形式載入資源連結。

<script src="dist/build.js"></script>

  package.json

  這裡需要在檔案的scripts關鍵字下新增如下指令，用於啟動webpack-dev-server伺服器。

"dev": "webpack-dev-server --inline --hot --open --port 4009"

   引數說明：

--inline:自動重新整理
--hot:熱載入
--port:指定埠號為5200
--open:自動在預設瀏覽器中開啟
--host:可以指定伺服器的ip,不指定預設為127.0.0.1(localhost)

  同時在控制檯中，將游標定位於專案根目錄中，執行下述指令將webpack、webpack-dev-server、html-webpack-plugin打包到package.json檔案中。

cnpm i webpack webpack-dev-server html-webpack-plugin --save-dev

  現在由於這裡變動不少，而且一直沒有上一個完整的原始碼，所以說現在上的完整原始碼如下：

{
  "name": "csspackage",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 4009"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.1",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^0.5.8",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.0"
  }
}

  webpack.config.js原始碼：

  在原始碼中新增html-webpack-plugin依賴的引用，如下：

var htmlwp = require('html-webpack-plugin');

  同時新增如下程式碼：

,plugins:[
   new htmlwp({
        title:'首頁'   //生成的頁面標題
        ,filename:'index.html'  //webpack-dev-server在記憶體中生成的檔名稱，自動將build注入到這個頁面底部，
        ,template:'index.html'  //根據index.html這個模版來生成（這個檔案請程式設計師自己生成）
    })
]

  為了方便起見，完整原始碼為：

var htmlwp = require('html-webpack-plugin');
module.exports = {
    entry:'./src/main'   //指定打包的入口檔案
    ,output:{
        path:__dirname +  '/dist'
        ,filename:'build.js'
    }
    ,module:{
        loaders:[
            {
                test:/\.css$/
                ,loader:'style-loader!css-loader'
            }
            ,{
                test:/\.scss$/
                ,loader:'style-loader!css-loader!sass-loader'
            }
            ,{
                test:/\.less/                    //打包.less檔案
                ,loader:'style-loader!css-loader!sass-loader!less-loader'
            }
            ,{
                test:/\.(png|jpg|gif|ttf)$/           //打包url請求的資原始檔
                ,loader:'url-loader?limit=20000'     //limit表示圖片的大小為40k是臨界值，小於20k的圖片均被
                // 打包到build.js中去，此時圖片的顯示就會很快，這是一個優化操作。
            }
        ]
    }
    ,plugins:[
        new htmlwp({
            title:'首頁'   //生成的頁面標題
            ,filename:'index.html'  //webpack-dev-server在記憶體中生成的檔名稱，自動將build注入到這個頁面底部，
            ,template:'index.html'  //根據index.html這個模版來生成（這個檔案請程式設計師自己生成）
        })
    ]
};

執行結果

  在控制檯中執行下述指令

cnpm i
webpack
npm run dev

  然後再瀏覽器中訪問dist/index.html，其訪問結果如下：

  在上面，我們明顯可以看到，我們所載入的圖片已經展示出來了，當然在這裡，其實我們只需要下面這個指令就行了：

npm run dev

  此時在控制檯中就會顯示出來我們的網頁訪問路徑：

  通過訪問上圖路徑，我們可以看到和之前一樣的介面展示效果。

  與之前不同之處在於，前面的頁面展示其實是因為webpack指令將頁面打入了dist/index.html中，此處的頁面在修改程式碼後要想實現重新整理，得重新執行一次webpack指令。

  而圖示中的http://localhost:4009/路徑則是屬於熱載入的網頁路徑，此處的路徑在修改程式碼時頁面可以實現熱載入效果。