Introduction to the

Development, debugging and construction of multi-page site (common Web site) based on Webpack front-end engineering scheme, and suitable for PC and mobile terminal.

features

  • Front-end engineering
  • PostCSS and Sass are integrated
  • EJS template engine is supported
  • Responsive support
  • Supports modularization and componentization
  • Support for development, debugging, and construction
  • Supports normative verification of JS and CSS codes

Compatible with

  • PC: IE8+ (including IE8);
  • Mobile: mainstream browsers;

The project address

Github.com/zhaotoday/w…

Online example

reference

Webpack

The command

$NPM install $NPM run dev $NPM run dev $NPM run Build # If you need IE8 compatibility, copy SRC to build-IE8 /website. And build (in the build - ie8 directory) $NPM run preview build # $$open http://localhost:8083/webpack-dev-server/my-view.html # fix JS code NPM run eslintFix # Check JS code $NPM run eslint # Check CSS code $NPM run stylelIntCopy the code

Add polyfill

When developing with ES6 syntax, polyfill can be introduced on demand to improve browser compatibility.

$NPM install --save core-jsCopy the code

Polyfill in SRC/static/Commons/scripts/utils/polyfills introduced in js:

import 'core-js/es6/promise'Copy the code

The CSS specification

Please refer to the BEM specification at github.com/zhaotoday/b… Here is an example:

< nav class = "nav" > < a href = "#" class = "nav__item nav__item -- normal"/" > normal < / a > < a href = "#" class = "nav__item The current state nav__item - active "> < / a > < a href =" # "class =" nav__item nav__item - hover "> the state when the mouse < / a > < / nav >Copy the code

Sass code:

.nav {
  &__item {
    &--normal {
    }
    &--active {
    }
    &--hover {
    }
  }
}Copy the code

Sass code based on BEM Mixin:

@include b(nav) {
  @include e(item) {
    @include m(normal) {
    }
    @include m(active) {
    }
    @include m(hover) {
    }
  }
}Copy the code

responsive

@import "~include-media/dist/_include-media.scss"; $breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px); .selector { @include media("<=tablet") { background-color: red; } @include media(">tablet", "<desktop") { background-color: yellow; } @include media(">=desktop") { background-color: green; }}Copy the code

IE8 compatibility

  • Add es3ify-webpack-plugin to solve ES3 syntactic compatibility problem:
$ npm install --save-dev es3ify-webpack-pluginCopy the code
const es3ifyPlugin = require('es3ify-webpack-plugin'); // Add const config = {plugins: [new es3ifyPlugin()]}Copy the code
  • Add ES5-Shim and ES5-SHAM to solve the problem of MISSING ES5 APIS in ES3.
<! --[if lt IE 9]> <script SRC ="//cdn.liruan.cn/es5-shim/4.5.9/es5-shim.min.js"></script> <script SRC = "/ / CDN. Liruan. Cn/es5 - shim / 4.5.9 es5 - sham. Min. Js" > < / script > <! [endif]-->Copy the code
  • IE8 supports CSS3 pseudo-classes and attribute selectivizr.js:
<! -- [if lt IE 9] > < script SRC = "/ / CDN. Liruan. Cn/nwmatcher / 1.3.6 / nwmatcher. Min. Js" > < / script > < script SRC = "/ / CDN. Liruan. Cn/selectivizr / 1.0.2 / selectivizr - min. Js" > < / script > <! [endif]-->Copy the code
  • Minimize the use of CSS3 and do not use ECMAScript 5 features that IE8 cannot emulate;
  • Copy SRC to build-IE8 /website and run NPM run build under build-IE8.

The directory structure

| | - build / / Webpack configuration - SRC / / source | | - static / / static resources | | - Commons / / utility script and style, Build into Commons. Js and Commons. CSS | | - components / / component set | | - my - component / / my - component component | | - images / / page reference image | | - Styles / / style | | - index. SCSS | | - images / / CSS reference image | | | - scripts / / script | - index. Js / / need to introduce the components of all style and file Styles/index SCSS | | - utils | | - styles / / style | | - index. SCSS | | - reset. SCSS / / reset | | - fonts. SCSS / / font | | - classes / / style classes | | - images / / CSS reference image | | - my - view / / my - view page | | - images / / page reference image | | | - scripts / / script | - index. Js | | - Utils | | - styles / / style | | - index. SCSS | | - images / / CSS reference image | | - page views / / | | - Commons / / public components, such as a code block | | - Components / / component set | | - my - component. Ejs / / my - component component | | - snippets / / a code block, introduced in each page's HTML template | | - head. Ejs / / head, Is the < head > tags | | - foot. At the bottom of the ejs / /, such as: At the bottom of the page to introduce the public JS, statistical code, etc. | | - my - the ejs / / my - view page | | - a mock / / mock data | | - data / / configuration data | | - global. | json / / global configuration data | - my - view. The json / / my - view page configuration data | | - assets / / public static resources | | - scripts / / script | | - libs / / JS library | | - utils / / JS collection tools | | - Styles / / style | | - utils/collection/Sass tools | | - functions provides. SCSS / / function | | - mixins. SCSS / / mixed | | - variables. SCSS / / variablesCopy the code