anotherWill / ht-mo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mobile Page: webpack + handlebars + postcss

A template about mobile page

Usage

npm i && npm start

  • webpack multiple entries
  • handlebars template
  • postcss
  • mobile page adapt with viewport(vw, vh, max-vw, max-vh, aspect-ratio )
  • better SEO

Ways worked fine about reference pics in handlebars template

  • use CopyWebpackPlugin new CopyWebpackPlugin([ {from: './src/assets/images', to: './images'} ]),
  • conf inlineRequires: '\/assets/images\/' in webpack
  • extract-loader

Rough(坑)

1、Warning Existed: postcss-viewport-units adapted mobile native browsers by adding content property in cascading style sheets. And when used Font Icon, generally, pseudo classed ::after or ::before had a content property. so it warn pseudo classed already has a 'content' property, give up to overwrite it. We can use SVG replace Font Icon certainly.

2、@font-face url()

Need to be optimized

  • webpack-dev-server recompiled very slowly
  • webpack env donot define
  • compression
  • code spliting
  • Few handlebars helper
  • add jquery
  • ....

About


Languages

Language:HTML 37.0%Language:CSS 32.8%Language:JavaScript 30.2%