Use Webpack to develop common Web site front-end engineering scheme

Introduction to the

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

When developing PC websites that are ie8-compatible, use CSS3 as little as possible and do not use ECMAScript 5 features that IE8 cannot emulate.

function

The project address

Github.com/zhaotoday/w…

Online example

It is recommended to open it on your phone or Chrome’s device emulator.

• www.rjwb.cn/pay.html
• www.rjwb.cn/guide.html
• www.rjwb.cn/how.html
• www.rjwb.cn/qa.html
• www.rjwb.cn/protocol.ht…

Relevant reference

• JavaScript code specification
• stylelint-config-standard
• compass
• postcss-utilities

use

1. The command

#Download the code
$ git clone https://github.com/zhaotoday/webpack-website.git
#Install dependencies
$ npm install
#Development and debugging
$ npm start
#build
$ npm run build
#Verify THE JS code against the Standard specification
$ npm run eslint
#Format JS code according to Standard specification code
$ npm run eslintfix
#Verifying CSS code
$ npm run stylelintCopy the code

2. Modify Webpack configurations

• new/build/utils/consts/projects/{your-project}.js;
• referenceplay.jsConfigure PROJECT, PAGES, CDN constant, note PAGES, configure it as your own page.

3. Develop web pages

compatibility

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

Add polyfill

#Install the core - js
$ npm install --save core-jsCopy the code

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

Style writing 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--active"> Current status </a>
  <a href="#" class="nav__item nav__item--hover"> Cursor status </a>
  <a href="#" class="nav__item nav__item--normal"> Normal </a>
</nav>Copy the code

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

componentization

The directory structure

| | - build / / Webpack configuration - SRC / / source directory | | - projects / / project set | | - play / / play project (for instance) | | | - pages / / web page | - home / / home page (for instance) | | - images / / homepage image | | -- scripts. Js/script/front page | | - styles. The SCSS / / home page style | | -- template. HTML / / | homepage HTML template | - news / / news page (for instance) | | - Commons / / common code | | - components / / common components | | - a panel / / panel component (for example) | | | - images / / panel component related images | -- styles. SCSS / / panel component related style | | - list / / list components (for example) | | - the requires / / public code block, introduced in each page's HTML template | | - head / / code block head, Is the < head > tags | | - foot / / at the bottom of the code block, such as: public JS, introduced at the bottom of the page statistical code, etc. | | - the header/head/page display content, such as: navigation menu etc. | | - footer / / show the bottom of the page content, such as: Footer navigation links, copyright information, etc. | | - scripts / / script | | - libs / / JS library | | - utils / / set some JS tools | | -- helpers. JS / / help function set | | - consts .js / / constant configuration | | -- polyfill. Js / / polyfill | | - styles / / style | | - global / / global style | | -- reset. SCSS / / style reset | | - classes / / style classes | | - utils / / style collection tools | | - functions provides the SCSS / / SASS function | | -- mixins. SCSS / / SASS mixed | | - variables. The SCSS / / SASS Variable | | - scripts / / script (global) | | - libs / / JS library | | - utils / / set some JS tools | | -- helpers. JS / / help function set | | - styles / / Style (global) | | - utils / / style collection tools | | - functions provides the SCSS / / SASS function | | -- mixins. SCSS / / SASS mixed | | - variables. The SCSS / / SASS variableCopy the code