Recently, I took over a new project. The official website of the company is not suitable for single pages in order to be crawl-friendly, not to mention using frameworks like React and Vue. I thought it was troublesome to configure Webpack for a few simple pages. It was ok to write ES5, CSS and HTML directly, but once I started to write, I left all kinds of handy tools at the front end and returned to the slash-and-burn era. It’s a pain in the neck, and even if it’s finished, subsequent iterations are just as painful to maintain. It would be better to create a scaffold, and then use it when you meet the need for multiple pages on the official website.

Ok, that’s the background, this scaffold is suitable for multi-page applications such as the official website. This scaffold already supports ES6, LESS, modular, hot loading, ESLint, and more

Build Setup

# install dependencies
npm install

# localhost:8080 localhost:8080
npm run dev

# Production is packaged at release time
npm run build

Copy the code

The directory structure

└ ─ SRC / / SRC folder │ ├ ─ pages/page/folder │ │ ├ ─ about │ │ │ the about the HTML │ │ │ the about the js │ │ │ about. Less │ │ │ │ │ ├ ─ contact │ │ │ contact. CSS │ │ │ contact. HTML │ │ │ contact. Js │ │ │ │ │ └ ─ home │ │ index. The HTML │ │ index. The js │ │ index. The less │ │ │ ├ ─tools // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // ├ ─ garbage // Json │ page.config.js // Deploy configuration file │ readme. md │ webpack.config.dev.js // │ webpack.config.prod.js // Generate the webpack configuration file of the environmentCopy the code

The development process

If you add a new page, it only takes two steps and you don’t need to change configuration files such as Webpack

  1. Add a new folder in Pages
  2. Add the information for this page to page.config.js

Such as

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

Copy the code

Scaffolding address: github.com/JesseZhao19…