9-4 Webpack（部署到github）

如何使用 webpack

10.一键部署到 github

• 做了网页目的就是给别人看
• 步骤
  1.本地打包
  2.上传到github

10.1 一个文件上传

• git add . – git commit -v – yarn build（重新生成dist目录）
• 理论上来说dist目录中的内容就是一个独立的前端网站
  1.在本地用http-server测试一下
  2.cd dist – http-server -c-1
  3.本地预览没问题就可以上传到github
• 上传到github
• 一个小tip：如果代码已经上传过一次，想要重新上传到另一个仓库，则把复制的第一行代码中add改为set url
  git remote set url origin git@github.com:zhiyanLiu-xz/webpack-demo-1.git
• 设置github pages，在给的路径后面加上：dist/index.html

10.2 新建分支上传

• 在.ignore中添加dist，不上传到master
• 分支上传
  1.git branch gh-pages
  2.git checkout gh-pages：切换到分支
  3.进入到分支后，内容和master一模一样，删掉除了dist、ignore、node_modules以外的所有文件
  4.把dist中所有文件都拷出来到当前文件：mv dist/* ./，删掉dist
  5.目前这个目录就是个网站的根目录，包含所有东西
  6.然后正常流程提交上传，到push的时候它会提示，然后复制给出的push即可（不用自己去记）
  
• 可以通过分支去设置网页
  这样设置的网页就不需要dist，直接/index.html即可
• 回到历史某次提交：
  1.git log（查看历史，后面一长串是ID）
  2.git reset --hard ID（ID复制上面的）

10.3 分支上传写脚本（有点难，易错，尽量不搞）

• 分支上传步骤太多，可以写个脚本，一键上传
• 写脚本
  1.回到master分支：git checkout master
  2.新建：deploy.sh
  3.把步骤写进去（&&是为了保证一个错误后面的也不会执行）

yarn build &&
git checkout &&
rm -rf *.html *.js *.css *.png &&
mv dist/* ./ &&
rm -rf dist;
git add . &&
git commit -m 'update' &&
git push &&
git checkout -

• 运行脚本：sh deploy.sh
  如果担心代码写坏：运行前先git add和commit一下