webpack架設系列文整理

有一天發現文章七零八落的不好找東西,想拉下來還自己忘記步驟,所以再整理一篇出來。

文章的 demo code 可以在我的 github 上面查看。
基於 vue 配置的 webpack
基於 react 配置的 webpack
 
有要拉下來實驗看看的話,記得進入到放 src 資料夾的地方安裝 node_modules ,然後 build 再 serve (如果想要測試一下 hot reload 效果的話)

npm i
npm run build
npm run serve

如果沒有 build 直接 serve 的話 , demo 檔案中的圖片會看不見喔。
 
這些主要都是針對 vue 的
webpack架設1 - why webpack
webpack架設2 – 前置作業
webpack架設3 – 設定webpack.config.js
webpack架設4 - html檔案的打包
webpack架設5 - 安裝router-link與webpack-dev-server
webpack架設6 - 圖片與css打包
webpack架設7 - 頁面懶加載
webpack踩坑整理
[Vue] 把專案部屬到 GitHub page 上
 
這邊主要是做功能的,樣式辣眼睛,感謝各位包容XD
 
這篇是基於 react 的
[React] webpack開發環境安裝
 
react demo 的樣式比較漂亮(自賣自誇一下)XD