Description

An multi-page website starter based on https://github.com/lingobus/mpa-vue-template.

Features

1. [email protected]
2. babel 7 with preset-env(using browserslist for browser compatibility)
3. pug(for vue template and html template)
4. [email protected]
5. stylus(stylus -> postcss)
6. postcss with autoprefixer,preset-env(using browserslist for browser compatibility)
7. multiple pages
8. [email protected]
9. [email protected]
10. mock data
11. a bunch of solutions......

using the best practice of multi-page webpack config is the principle of this project. you can:

1. use require('./some-img.png') in pug entry.
2. write pug with hmr support(entry png, vue pug and their included or extended dependences ).
3. js/css injection support for pug entry.
4. put all dependences(pug,css,js,img...) of one page in one folder.
5. specify page num and port name when running dev server(PAGE=lazyload PORT=8081 npm start)

Build Setup

# download repo
git clone https://github.com/lingobus/mpa-starter.git
cd mpa-starter

# install dependencies
yarn or npm install
npm run clone

# serve all pages with hot reload
npm start

# build all pages for production
npm run release

# specify one page
PAGE=login npm start
PAGE=login npm run release

# you can specify multiple pages with ',' as seperator
PAGE=index,login,register npm start # see https://github.com/lingobus/mpa-starter#known-issues
PAGE=index,login,register npm run release

# you can run dev-server with a different port number in development(usefull when develop multiple pages in parallel)
PAGE=lazyload PORT=8081 npm start

Explaination about webpack output

1. pages/[name]/index.[contenthash].js: main js bundle
2. pages/[name]/venders.[contenthash].js: node_modules dependences
3. pages/[name]/index.[contenthash].css: imported .styl,.css and <style></style> in vue
4. <style scoped></style> in vue is injected to html because html element attribute like data-v-2a8bbda4 generated by vue-loader changes by every build and we don't want it to change css file's [contenthash]
5. common/lib/* is imported with <script src='*' /> in html template, so they has no relation with webpack. So puting large dependence in common/lib/ can speed up webpack compilation but may bring in compatibility problems. (Using webpack with browserslist's ecosystem for everything seems to be best practice.)
6. pages/[name]/[module-name].[contenthash].js: import(/* webpackChunkName: "pages/dynamic-import/async-component" */'./async-component.vue') will generate pages/dynamic-import/async-component.js

Analysis bundle of a single page

https://webpack.js.org/guides/code-splitting/#bundle-analysis

# generate build/prod/compilation-stats.json
PAGE=register npm run release
# analysis with https://github.com/webpack-contrib/webpack-bundle-analyzer
npm run analyzer

File naming note

• common components and assets are placed under src/commom directory，page related code are placed under src/pages directory，page entry must be src/pages/[name]/index.js or src/pages/[name]/${locale}/index.js, page template must be src/pages/[name]/index.pug or src/pages/[name]/${locale}/index.pug.
• /src/js/common/lib hold external assets for sharing with multiple pages.

Asset import note

in styl

background: url('~@/img/[email protected]')
background: url('./img/[email protected]')

in vue

img(src='@/img/[email protected]')
img(src='./img/[email protected]')

background: url('~@/img/[email protected]')
background: url('./img/[email protected]')

in pug

img(src=require('@/img/common/@2x.png'))
img(src=require('./img/[email protected]'))

Known issues

1. When you run npm start with multiple pages, all bundles will be rebuilded when you change code in one because webpack-dev-middleware seems don't support multi-compiler. So always specify one page like PAGE=* npm start in development. If you want to develop multiple pages in parallel, run another dev-server with a different port number like PAGE=lazyload PORT=8081 npm start.