成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Webpack系列——關(guān)于Webpack-dev-server配置的點(diǎn)點(diǎn)滴滴

melody_lql / 3363人閱讀

文章首發(fā)于我的github及個人博客,github請看https://github.com/huruji/blo...,轉(zhuǎn)載請注明出處。

我們都知道webpack-dev-server為我們在開發(fā)的時候提供了一個服務(wù)器以便于我們的開發(fā),我們在使用之前當(dāng)然需要安裝:

npm i webpack webpack-dev-server -D

安裝完成之后我們只需要在webpack配置中配置devServer選項即可,以下是一個簡單的配置:

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

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist")
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = config;

這里指定webpack-dev-server所做的事情就是以dist文件夾為開啟服務(wù)器的文件夾位置,并使用熱更新。這篇文章中所有演示內(nèi)容也將以這個配置為基礎(chǔ)。
上面的webpack-dev-server中指定了contentBase和hot為我們做了我們的任務(wù),那么除了這兩個配置選項,webpac-dev-server還有那些配置選項呢?
我將webpack-dev-server中的配置選項進(jìn)行簡單分類,總結(jié)如下:

和訪問地址有關(guān)

port:指定服務(wù)器的端口號,webpack-dev-server默認(rèn)的端口號是8080
host:指定host,默認(rèn)為losthost,當(dāng)然指定此項大多數(shù)情況下是為了這個服務(wù)可以被外部服務(wù)訪問,這種情況之下,你最好應(yīng)該確保你的服務(wù)運(yùn)行在DNS解析的域名IP一致
https:webpack-dev-server默認(rèn)以http形式開啟服務(wù),如果需要指定允許https,應(yīng)該在這個選項中指定相應(yīng)的HTTPS證書

https:{
    key: fs.readFileSync("/path/to/server.key"),
    cert: fs.readFileSync("/path/to/server.crt"),
    ca: fs.readFileSync("/path/to/ca.pem"),
}

proxy:設(shè)置代理,如果我們在開發(fā)的時候需要使用到一個后端開發(fā)服務(wù)器,而卻希望能夠在同一個域名下訪問,這通常會使用在前后端同時開發(fā)時,前端需要使用后端API時,這點(diǎn)類似于Nginx的proxy選項。
webpack-dev-server使用的是http-proxy-middleware這個包,配置的選項與其一致。

和服務(wù)器對外輸出有關(guān)

compress:對所有服務(wù)啟用gzip壓縮
contentBase:靜態(tài)文件的文件夾地址,默認(rèn)為當(dāng)前文件夾
headers:在所有的響應(yīng)中提供首部內(nèi)容

headers: {
  "X-Custom-Foo": "bar"
}

historyApiFallback:指定相應(yīng)的請求應(yīng)該被指定的頁面替代,如果404頁面需要全部替代為index.html,則聲明為true即可,其他情況則需要使用rewrites來重寫
404:

historyApiFallback:true

rewrites:

historyApiFallback: {
  rewrites: [
    { from: /^/$/, to: "/views/landing.html" },
    { from: /^/subpage/, to: "/views/subpage.html" },
    { from: /./, to: "/views/404.html" }
  ]
}

openPage:指定打開瀏覽器時跳轉(zhuǎn)到的頁面

和開發(fā)體驗相關(guān)

color:使用顏色,有利于找出關(guān)鍵信息,只能在控制臺中使用
hot:啟用熱替換屬性
info:在控制臺輸出信息,默認(rèn)輸出
open:運(yùn)行命令之后自動打開瀏覽器
progress:將運(yùn)行進(jìn)度輸出到控制臺,只可以使用控制臺

最佳編寫實踐

以上的命令大部分在大部分情況下只會用到很少一部分,并且以上的很多命令都是可以在配置中聲明或者在控制臺聲明的,推薦和開發(fā)體驗相關(guān)的,如hot、open、progress、color等通過命令行來寫,并且寫在package.json中
如:

"scripts": {
    "dev": "webpack-dev-server --open --hot --colors --progress --inline --config webpack.dev.js"
  },

參考:webpack中文文檔

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/88830.html

相關(guān)文章

  • webpack配合vue.js實現(xiàn)完整單頁面demo

    摘要:本篇文章主要是我在開發(fā)前研究了的單頁面應(yīng)用,因為需要用到的,所以確保安裝了,建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個單頁面應(yīng)用,具體關(guān)于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。 本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁面應(yīng)用,因為需要用到node的npm,所以確保安裝了node,建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項目中需要加載一些np...

    2450184176 評論0 收藏0
  • js-工具嘗試篇-webpack-dev-server

    摘要:以前看或者做開發(fā)的時候,常??吹健?唇榻B是一個基于框架的小服務(wù),通過來處理這個打包機(jī)小查了一下,的作用是把打包成中間件。原理大致清楚了,還可以根據(jù)需求選不同的模式事不宜遲,趕緊試試吧。那么是如何引進(jìn)來的呢所以說,是生成在內(nèi)存中的。 以前看demo或者做開發(fā)的時候,常??吹絯ebpack-dev-server。這邊敲代碼,同時刷新瀏覽器,真是nice!但是自己卻沒有了解學(xué)習(xí)過它是怎一回事...

    waltr 評論0 收藏0
  • Vue2學(xué)習(xí)之旅一:初始化項目搭建(不帶路由)

    摘要:除此之外,你還可以運(yùn)行打包命令此時之前說的打包生成的文件應(yīng)該就生成了,或者選擇用瀏覽器打開應(yīng)該也可以看見和剛剛一樣的結(jié)果。而如何創(chuàng)建一個對象是知道,因此開頭引入了,并使用它常見了一個對象,然后這個對象就管理了這一塊區(qū)域。 作者:心葉時間:2018-04-25 16:33 本篇最終項目文件Github地址:github.com/paper520/vue.quick/tree/V1 Vue...

    lijy91 評論0 收藏0
  • webpack -> vue Component 從入門到放棄(四)

    摘要:先展示一下文件目錄結(jié)構(gòu)先把相關(guān)的依賴給裝好注意一下注釋只是為了解釋,在中不能寫注釋插件加載器預(yù)編譯語法跨平臺環(huán)境用來設(shè)置命令行安裝預(yù)編譯語法的配置中的對象,用于處理目錄的對象,提高開發(fā)效率。 Foreword 之前三篇大致介紹了webpack的用法,正如這個系列標(biāo)題而言 從webpack 到 vue Component,所以最后一篇文章當(dāng)然是要講 component, 不對應(yīng)該說是結(jié)合...

    z2xy 評論0 收藏0
  • webpack -> vue Component 從入門到放棄(四)

    摘要:先展示一下文件目錄結(jié)構(gòu)先把相關(guān)的依賴給裝好注意一下注釋只是為了解釋,在中不能寫注釋插件加載器預(yù)編譯語法跨平臺環(huán)境用來設(shè)置命令行安裝預(yù)編譯語法的配置中的對象,用于處理目錄的對象,提高開發(fā)效率。 Foreword 之前三篇大致介紹了webpack的用法,正如這個系列標(biāo)題而言 從webpack 到 vue Component,所以最后一篇文章當(dāng)然是要講 component, 不對應(yīng)該說是結(jié)合...

    MycLambert 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<