開箱即用的多頁面webpack腳手架

jessezhao1990發表於2019-03-04
Web

最近接手一個新專案，公司官網，官網為了對爬蟲友好，不合適做單頁面，更不大適合用react，vue這樣的框架。本來覺得幾個簡單的頁面還需要配置webpack挺麻煩，直接ES5，css，html寫寫就ok，可是一旦下手開始寫，離開了前端的各種得心應手的工具，回到了刀耕火種的時代。痛不欲生，即使寫完了，以後的迭代維護同樣痛苦。 還不如建立一個腳手架，以後遇到這種官網多頁面的需求的時候拿來即用，豈不美哉。

好了，背景就是這些，本腳手架適合做官網之類的多頁面的應用。本腳手架已經支援使用ES6，less，模組化，熱載入，eslint等功能

Build Setup

# 安裝依賴
npm install

# 開發的時候在本地啟localhost:8080，並開始熱載入
npm run dev

# production的釋出時打包
npm run build

複製程式碼

目錄結構


└─src                                      // src 資料夾
│    ├─pages                               // 頁面資料夾
│    │  ├─about
│    │  │      about.html
│    │  │      about.js
│    │  │      about.less
│    │  │
│    │  ├─contact
│    │  │      contact.css
│    │  │      contact.html
│    │  │      contact.js
│    │  │
│    │  └─home
│    │          index.html
│    │          index.js
│    │          index.less
│    │
│    └─tools                          // 工具資料夾
│            utils.js
│
│  .babelrc                         // babel的配置檔案
│  .eslintignore
│  .eslintrc.js                     // eslint的配置檔案
│  .gitignore
│  ecosystem.config.js              // pm2 deploy的配置檔案
│  package.json
│  page.config.js                   // 頁面的配置檔案
│  README.md
│  webpack.config.dev.js            // 開發環境的webpack配置檔案
│  webpack.config.prod.js           // 生成環境的webpack配置檔案
         

複製程式碼

開發流程

如果增加新頁面，只需兩步，不需要改webpack等配置檔案

  1. 在pages中新增一個資料夾
  2. 在page.config.js中新增這個頁面的資訊即可

比如

  {
    name: `contact`,
    html: `contact/contact.html`,
    jsEntry: `contact/contact.js`
  }

複製程式碼

腳手架地址： github.com/JesseZhao19…

相關文章