從零開始的webpack生活-0x002：devServer自動刷新

時間 2019-11-16

標籤開始 webpack 生活 0x002 devserver 自動刷新欄目悠閒生活简体版

原文原文鏈接

0x001 概述

上一章已經實現了最簡單的webpack配置文件使用和webpack監聽功能，這一章要開始實現自動刷新。html

0x002 瀏覽器自動刷新

建立新的項目框架node
```
- webpack_study
    + 0x001-begin
    - 0x002-dev-server
       - src
```
咱們將在0x002-dev-server下作全部的開發webpack

初始化項目，這裏使用npm init指令初始化，生成package.json，以便之後管理依賴包git

$ npm init -y
# 輸出
Wrote to /MY_PROJECT/PROJECT_OWN/webpack_study/0x002-dev-server/package.json:

{
  "name": "1-web-auto-refresh",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

建立./src/index.js和./index.html,並添加對js的引用github

# ./src/index.js
console.log('hello wbpack');

<!--./index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-web-auto-refresh</title>
    <script src="./index.js"></script>
</head>
<body>

</body>
</html>

複製上一章的webpack.config.js配置文件web

var path       = require('path')
module.exports = {
    entry : './src/index.js',
    output: {
        path    : path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    }
}

配置devServernpm

var path       = require('path')
module.exports = {
    entry    : './src/index.js',
    output   : {
        path    : path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        port       : 9000
    }
}

devServer提供了一個web服務器json

contentBase爲該服務器的根目錄，它將以此來尋找資源
port爲端口，咱們經過該端口訪問該服務器的資源

安裝依賴包webpack-dev-server、webpacksegmentfault

$ cnpm install --save-dev webpack
$ cnpm install -g webpack-dev-server 
# 輸出
Downloading webpack-dev-server to /usr/local/lib/node_modules/webpack-dev-server_tmp
...
[webpack-dev-server@2.9.4] link /usr/local/bin/webpack-dev-server@ -> /usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js

$ webpack-dev-server -v
# 輸出
webpack-dev-server 2.9.4
webpack 3.8.1

啓動devServer瀏覽器

$ webpack-dev-server
# 輸出
Project is running at http://localhost:9000/
webpack output is served from /
Content not from webpack is served from /MY_PROJECT/PROJECT_OWN/webpack_study/0x002-dev-server/1-web-auto-refresh/dist
Hash: ab62a2a6acbc29a572c6
Version: webpack 3.8.1
Time: 338ms
   Asset    Size  Chunks                    Chunk Names
index.js  324 kB       0  [emitted]  [big]  main
   [2] multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js 40 bytes {0} [built]
...
    + 11 hidden modules
webpack: Compiled successfully.

接着咱們就能夠經過http://loaclhost:9000來訪問這個網站了！

注意

webpack-dev-server指令擁有與webpack -w相同的功能，在代碼修改的時候根據webpack配置文件自動打包，在出錯的時候輸出錯誤信息，還能在修改代碼的時候自動刷新瀏覽器。
自動刷新瀏覽器只有在修改配置文件中entry配置的入口文件及其所引用的文件有效，其餘則無效，好比沒有引用到的文件和index.html
自動打包出來的index.js此時在內存中，是看不見的

0x003 其餘配置

devServer還有許多其餘經常使用配置，這裏只講經常使用的，暫時不講熱更新

compress:是否gzip壓縮
host:訪問地址，默認是localhost，可是能夠配置成'0.0.0.0',就能夠使用127.0.0.1訪問了
index:不指定訪問資源時，默認訪問contenBase路徑下的index.html文件，可是也能夠經過指令index改變默認訪問文件
open:執行webpack-dev-server後，咱們須要本身打開瀏覽器訪問localhost:9000訪問，配置該指令能夠在啓動webpack-dev-server後自動打開一個瀏覽器窗口
progress:顯示打包進度，用於命令行
其餘配置可查閱webpack-devServer章節

注意：

配置指令分爲兩種，一種是隻用在終端使用，好比progress，只能在終端指定webpack-dev-server --progress；一種既能夠在終端，也能夠在配置文件，好比compress,既能夠在配置文件中指定compress:true，也能夠在終端中指定webpack-dev-server --compress，在終端中指定使用-鏈接每一個指令，在配置文件中，使用駝峯法指定。只能在終端中使用的在webpack-devServer章節中指令後標有CLI only

能夠使用npm的script功能，快速調用webpack-dev-server

# package.json
  "scripts": {
    "dev":"webpack-dev-server --progress",
    "build":"webpack -p"
  }
# 終端
$ npm run dev
$ npm run build

0x004 最終項目

文件夾結構

- 0x002-dev-server
    - src
        index.js
    package.json
    webpack.config.js

index.js
```
document.write('hello webpack')
```

package.json

{
  "name": "1-web-auto-refresh",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev":"webpack-dev-server --progress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1"
  }
}

webpack.config.js

var path       = require('path')
module.exports = {
    entry    : './src/index.js',
    output   : {
        path    : path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, ''),
        port       : 9000,
        compress   : true,
        open       : true,
        host       : '0.0.0.0',
        index      : 'index.html'
    },
}