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

AlanKeene 發布于2019-08-21 17:27 / 2665人閱讀

摘要：概述上一章已經實現了最簡單的配置文件使用和監聽功能，這一章要開始實現自動刷新。只能在終端中使用的在章節中指令后標有可以使用的功能，快速調用終端最終項目文件夾結構資源源代碼

0x001 概述

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

0x002 瀏覽器自動刷新

創建新的項目框架

- webpack_study
    + 0x001-begin
    - 0x002-dev-server
       - src

我們將在0x002-dev-server下做所有的開發

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

$ 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的引用

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





    
    1-web-auto-refresh

復制上一章的webpack.config.js配置文件

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

配置devServer

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服務器

contentBase為該服務器的根目錄，它將以此來尋找資源

port為端口，我們通過該端口訪問該服務器的資源

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

$ 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"
    },
}

0x005 資源

源代碼

GPU云服務器云服務器從零開始的郵件服務器從零開始 linux從零開始 python從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89535.html

從零開始的webpack生活-0x003：html模板生成

摘要：生成多頁面修改配置自動插入標題第二個頁面打包并查看文件夾結構這是一個模板文件這是一個模板文件此時的配置自動插入標題第二個頁面其他配置看這里資源源代碼 0x001 概述上一章之后已經可以自動刷新瀏覽器了，大大方便了我們的開發，這章開始講插件，第一個插件將會解決上一章節的一個問題，那就是index.html需要手動插入打包好的js，同時不會將index.html一起放到dist文件夾下的...

ZHAO_ 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x012：TranspilingLoader裝載腳本

摘要：概述上一章講的是樣式裝載相關的，這一章見得是腳本加載相關的環境配置栗子加載安裝依賴修改配置添加配置文件使用編寫腳本打包并查看結果可以看到，語法被自動轉化成了更多配置請查閱關于章節栗子加載安裝依賴 0x001 概述上一章講的是樣式裝載相關的loader，這一章見得是腳本加載相關的loader 0x002 環境配置 $ mkdir 0x012-transliling-loader $ c...

Tonny 2019-08-21 17:32 評論0 收藏0
從零開始的webpack生活-0x005：DefinePlugin奇妙用處

摘要：注意該插件是簡單的字符串替換，所以如果是定義常量最好使用包裹要替換的內容，或者使用轉化，否則會變成代碼直接插入，比如版本號這樣替換的時候就會變成而不會變成導致錯誤的數據格式。 0x001 概述上一章講的是js壓縮混淆，和這一章沒有半毛錢關系，這章講的是DefinePlugin，一個好像沒有用，但其實很好用的一個插件，我很喜歡，嘿嘿嘿！ 0x002 插件介紹說白了，這是一個簡單的字符...

The question 2019-08-21 17:28 評論0 收藏0
從零開始的webpack生活-0x010：TemplatingLoader裝載模板

摘要：概述上一章講的時候關于文件相關的，這一章講的是模板相關的。環境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結果可以看到，被打包成了字符串，并封裝成模塊導出。更多資源，請查閱的倉庫和官網資源源代碼 0x001 概述上一章講的時候關于文件相關的loder，這一章講的是模板相關的loder。 0x002 環境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 評論0 收藏0