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

開箱即用的多頁面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 bootstrap@3

• 因爲bootstrap依賴jquery，因此也須要安裝這個庫

npm install --save jquery@3.3.1

• 在須要的頁面引入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是靜態引入的