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

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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

最近接手一個新專案,公司官網,官網為了對爬蟲友好,不合適做單頁面,更不大適合用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'
}

腳手架地址: https://github.com/JesseZhao1…

評論區問題彙總

1. 如何引入bootstrap

  • 安裝bootstrap
npm install --save [email protected]
  • 由於bootstrap依賴jquery,所以也需要安裝這個庫
npm install --save [email protected]
  • 在需要的頁面引入bootstrap的js檔案和css檔案
let $ = window.jQuery = require("jquery");
require("bootstrap");
import 'bootstrap/dist/css/bootstrap.css';

釋疑: 為什麼需要用require而不是用import
事實上,開始的時候我用的也是import,但是隨後發現bootstrap在控制檯報錯,說需要jquery,我明明import進來jquery了啊。

因為require和import在引入檔案時有很大區別,require是動態化的,而import是靜態引入的

相關文章

前端開發 最新文章