国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開始的webpack生活-0x002:devServer自動(dòng)刷新

AlanKeene / 2661人閱讀

摘要:概述上一章已經(jīng)實(shí)現(xiàn)了最簡(jiǎn)單的配置文件使用和監(jiān)聽功能,這一章要開始實(shí)現(xiàn)自動(dòng)刷新。只能在終端中使用的在章節(jié)中指令后標(biāo)有可以使用的功能,快速調(diào)用終端最終項(xiàng)目文件夾結(jié)構(gòu)資源源代碼

0x001 概述

上一章已經(jīng)實(shí)現(xiàn)了最簡(jiǎn)單的webpack配置文件使用和webpack監(jiān)聽功能,這一章要開始實(shí)現(xiàn)自動(dòng)刷新。

0x002 瀏覽器自動(dòng)刷新

創(chuàng)建新的項(xiàng)目框架

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

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

初始化項(xiàng)目,這里使用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"
}

創(chuàng)建./src/index.js./index.html,并添加對(duì)js的引用

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




    
    1-web-auto-refresh
    




復(fù)制上一章的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提供了一個(gè)web服務(wù)器

contentBase為該服務(wù)器的根目錄,它將以此來(lái)尋找資源

port為端口,我們通過(guò)該端口訪問該服務(wù)器的資源

安裝依賴包webpack-dev-serverwebpack

$ 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


啟動(dòng)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.

接著我們就可以通過(guò)http://loaclhost:9000來(lái)訪問這個(gè)網(wǎng)站了!

注意

webpack-dev-server指令擁有與webpack -w相同的功能,在代碼修改的時(shí)候根據(jù)webpack配置文件自動(dòng)打包,在出錯(cuò)的時(shí)候輸出錯(cuò)誤信息,還能在修改代碼的時(shí)候自動(dòng)刷新瀏覽器。

自動(dòng)刷新瀏覽器只有在修改配置文件中entry配置的入口文件及其所引用的文件有效,其他則無(wú)效,比如沒有引用到的文件和index.html

自動(dòng)打包出來(lái)的index.js此時(shí)在內(nèi)存中,是看不見的

0x003 其他配置

devServer還有許多其他常用配置,這里只講常用的,暫時(shí)不講熱更新

compress:是否gzip壓縮

host:訪問地址,默認(rèn)是localhost,但是可以配置成"0.0.0.0",就可以使用127.0.0.1訪問了

index:不指定訪問資源時(shí),默認(rèn)訪問contenBase路徑下的index.html文件,但是也可以通過(guò)指令index改變默認(rèn)訪問文件

open:執(zhí)行webpack-dev-server后,我們需要自己打開瀏覽器訪問localhost:9000訪問,配置該指令可以在啟動(dòng)webpack-dev-server后自動(dòng)打開一個(gè)瀏覽器窗口

progress:顯示打包進(jìn)度,用于命令行
其他配置可查閱webpack-devServer章節(jié)

注意:

配置指令分為兩種,一種是只用在終端使用,比如progress,只能在終端指定webpack-dev-server --progress;一種既可以在終端,也可以在配置文件,比如compress,既可以在配置文件中指定compress:true,也可以在終端中指定webpack-dev-server --compress,在終端中指定使用-連接每個(gè)指令,在配置文件中,使用駝峰法指定。只能在終端中使用的在webpack-devServer章節(jié)中指令后標(biāo)有CLI only

可以使用npmscript功能,快速調(diào)用webpack-dev-server

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

0x004 最終項(xiàng)目

文件夾結(jié)構(gòu)

- 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 資源

源代碼

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/89535.html

相關(guān)文章

  • 從零開始webpack生活-0x003:html模板生成

    摘要:生成多頁(yè)面修改配置自動(dòng)插入標(biāo)題第二個(gè)頁(yè)面打包并查看文件夾結(jié)構(gòu)這是一個(gè)模板文件這是一個(gè)模板文件此時(shí)的配置自動(dòng)插入標(biāo)題第二個(gè)頁(yè)面其他配置看這里資源源代碼 0x001 概述 上一章之后已經(jīng)可以自動(dòng)刷新瀏覽器了,大大方便了我們的開發(fā),這章開始講插件,第一個(gè)插件將會(huì)解決上一章節(jié)的一個(gè)問題,那就是index.html需要手動(dòng)插入打包好的js,同時(shí)不會(huì)將index.html一起放到dist文件夾下的...

    ZHAO_ 評(píng)論0 收藏0
  • 從零開始webpack生活-0x001:webpack初次相逢

    摘要:同時(shí)不能直接單純的指定輸出的文件名稱,比如,將會(huì)報(bào)錯(cuò),可以換成以下方式指定,或者其他類似方式。如果打包過(guò)程出現(xiàn)錯(cuò)誤,比如語(yǔ)法錯(cuò)誤,將會(huì)在控制臺(tái)以紅色文字顯示,并且在你修復(fù)之后會(huì)再次打包。 0x001 概述 其實(shí)我不知道怎么寫,所以決定就一塊一塊的寫點(diǎn)平常配置的過(guò)程,根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

    Turbo 評(píng)論0 收藏0
  • 從零開始webpack生活-0x012:TranspilingLoader裝載腳本

    摘要:概述上一章講的是樣式裝載相關(guān)的,這一章見得是腳本加載相關(guān)的環(huán)境配置栗子加載安裝依賴修改配置添加配置文件使用編寫腳本打包并查看結(jié)果可以看到,語(yǔ)法被自動(dòng)轉(zhuǎn)化成了更多配置請(qǐng)查閱關(guān)于章節(jié)栗子加載安裝依賴 0x001 概述 上一章講的是樣式裝載相關(guān)的loader,這一章見得是腳本加載相關(guān)的loader 0x002 環(huán)境配置 $ mkdir 0x012-transliling-loader $ c...

    Tonny 評(píng)論0 收藏0
  • 從零開始webpack生活-0x005:DefinePlugin奇妙用處

    摘要:注意該插件是簡(jiǎn)單的字符串替換,所以如果是定義常量最好使用包裹要替換的內(nèi)容,或者使用轉(zhuǎn)化,否則會(huì)變成代碼直接插入,比如版本號(hào)這樣替換的時(shí)候就會(huì)變成而不會(huì)變成導(dǎo)致錯(cuò)誤的數(shù)據(jù)格式。 0x001 概述 上一章講的是js壓縮混淆,和這一章沒有半毛錢關(guān)系,這章講的是DefinePlugin,一個(gè)好像沒有用,但其實(shí)很好用的一個(gè)插件,我很喜歡,嘿嘿嘿! 0x002 插件介紹 說(shuō)白了,這是一個(gè)簡(jiǎn)單的字符...

    The question 評(píng)論0 收藏0
  • 從零開始webpack生活-0x010:TemplatingLoader裝載模板

    摘要:概述上一章講的時(shí)候關(guān)于文件相關(guān)的,這一章講的是模板相關(guān)的。環(huán)境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結(jié)果可以看到,被打包成了字符串,并封裝成模塊導(dǎo)出。更多資源,請(qǐng)查閱的倉(cāng)庫(kù)和官網(wǎng)資源源代碼 0x001 概述 上一章講的時(shí)候關(guān)于文件相關(guān)的loder,這一章講的是模板相關(guān)的loder。 0x002 環(huán)境配置 $ mkdir 0x010-templating-loader...

    jk_v1 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<