Webpack系列——關于Webpack-dev-server配置的點點滴滴

melody_lql 發布于2019-08-21 16:51 / 3354人閱讀

文章首發于我的github及個人博客，github請看https://github.com/huruji/blo...，轉載請注明出處。

我們都知道webpack-dev-server為我們在開發的時候提供了一個服務器以便于我們的開發，我們在使用之前當然需要安裝：

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文件夾為開啟服務器的文件夾位置，并使用熱更新。這篇文章中所有演示內容也將以這個配置為基礎。
上面的webpack-dev-server中指定了contentBase和hot為我們做了我們的任務，那么除了這兩個配置選項，webpac-dev-server還有那些配置選項呢？
我將webpack-dev-server中的配置選項進行簡單分類，總結如下：

和訪問地址有關

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

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

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

和服務器對外輸出有關

compress：對所有服務啟用gzip壓縮
contentBase：靜態文件的文件夾地址，默認為當前文件夾
headers：在所有的響應中提供首部內容

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

historyApiFallback：指定相應的請求應該被指定的頁面替代，如果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：指定打開瀏覽器時跳轉到的頁面

和開發體驗相關

color：使用顏色，有利于找出關鍵信息，只能在控制臺中使用
hot：啟用熱替換屬性
info：在控制臺輸出信息，默認輸出
open：運行命令之后自動打開瀏覽器
progress：將運行進度輸出到控制臺，只可以使用控制臺

最佳編寫實踐

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

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

參考：webpack中文文檔

GPU云服務器云服務器 webpack-dev-server 關于韓國云服務器的配置訣竅 webpack cdn配置 webpack配置cdn

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

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

webpack配合vue.js實現完整的單頁面demo

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

2450184176 2019-08-19 18:35 評論0 收藏0
js-工具嘗試篇-webpack-dev-server

摘要：以前看或者做開發的時候，常常看到。看介紹是一個基于框架的小服務，通過來處理這個打包機小查了一下，的作用是把打包成中間件。原理大致清楚了，還可以根據需求選不同的模式事不宜遲，趕緊試試吧。那么是如何引進來的呢所以說，是生成在內存中的。以前看demo或者做開發的時候，常常看到webpack-dev-server。這邊敲代碼，同時刷新瀏覽器，真是nice!但是自己卻沒有了解學習過它是怎一回事...

waltr 2019-08-20 14:12 評論0 收藏0
Vue2學習之旅一：初始化項目搭建（不帶路由）

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

lijy91 2019-08-22 16:43 評論0 收藏0
webpack -> vue Component 從入門到放棄（四）

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

z2xy 2019-08-20 15:07 評論0 收藏0
webpack -> vue Component 從入門到放棄（四）

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

MycLambert 2019-08-01 16:32 評論0 收藏0