使用webpack搭建本地https開發環境

 

為什么本地需要 https 環境？

：因為 Facebook 的 Javascript SDK 只能在 https 環境中運行，為了開發方便，本地搭建https開發環境。

 

本次使用webpack devserver搭建本地https開發環境，查詢webpack配置后得知，還有兩個問題需要我們解決，域名 和 證書。

一、域名：域名可以用配置hosts解決，hosts配置一條記錄指向127.0.0.1即可。

notepad C:\Windows\System32\drivers\etc\hosts
127.0.0.1 jydeng.dev

二、證書：證書我們使用mkcert簽發。

1、安裝mkcert（使用Chocolatey安裝，Chocolatey是Windows上的包管理工具，用Windows做開發的同學盡快安裝一下）

choco install mkcert

2、使用mkcert生成根證書

mkcert -install

3、創建目錄存放域名證書和私鑰

D:
mkdir ca
cd ca

4、生成所需域名對應的本地證書，例如 jydeng.dev

mkcert jydeng.dev

5、拷貝證書到項目目錄下

6、配置devServer開啟 https (這一部分不了解的同學，參考一下webpack文檔中devServer那一章)

 devServer: {
    host: "jydeng.dev",
    port: 80,
    disableHostCheck: true,
    https: {
      key: fs.readFileSync(path.resolve(__dirname, "./https/jydeng.dev-key.pem")),
      cert: fs.readFileSync(path.resolve(__dirname, "./https/jydeng.dev.pem")),
    },
  }

解決了以上兩個問題，啟動webpack即可，會發現證書已經生效，Facebook SDK也可用了。