使用webpack搭建本地https开发环境

为什么本地需要 https 环境？

：因为 Facebook 的 Javascript SDK 只能在 https 环境中运行，为了开发方便，本地搭建https开发环境。

本次使用webpack devserver搭建本地https开发环境，查询webpack配置后得知，还有两个问题需要我们解决，域名 和 证书。

一、域名：域名可以用配置hosts解决，hosts配置一条记录指向127.0.0.1即可。

notepad C:WindowsSystem32driversetchosts
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也可用了。