基於 Webpack 開發和構建多頁面站點

簡介

基於 Webpack 開發、調試和構建多頁面站點（普通 Web 站點）的前端工程化方案，同時適用於 PC 端和移動端。

項目地址

github.com/zhaotoday/w…

特性

• 前端工程化
• 集成 PostCSS、Sass
• 支持 EJS 模板引擎
• 支持響應式
• 支持模塊化、組件化
• 支持開發、調試和構建
• 支持 JS、CSS 代碼規範性校驗

兼容

• PC 端：IE8+（含 IE8）；
• 移動端：主流瀏覽器；

線上例子

• www.liruan.cn

參考

• JavaScript 代碼規範
• stylelint-config-standard
• sass-utils
• compass
• include-media
• react 項目的一個ie8兼容性問題
• PostCSS
• EJS 模板引擎
• EJS 模板語言使用
• Handlebars 模板引擎

Webpack

• Webpack 中文文檔
• Webpack 2.2 中文文檔
• webpack報錯no postcss config...
• webpack-dev-server 示例

命令

# 安裝依賴（在根目錄、build、build-ie8 目錄下執行）
$ npm install

# 開發、調試（在 build 目錄下執行）
$ npm run dev

# 構建（在 build 目錄下執行）
$ npm run build

# 若是須要兼容 IE8，將 src 複製到 build-ie8/website 下，並構建（在 build-ie8 目錄下執行）
$ npm run build

# 預覽
$ open http://localhost:8083/webpack-dev-server/my-view.html

# fix JS 代碼
$ npm run eslintfix

# 校驗 JS 代碼
$ npm run eslint

# 校驗 CSS 代碼
$ npm run stylelint
複製代碼

添加 polyfill

使用 ES6 語法開發時，可按需引入 polyfill，提升瀏覽器兼容性。

# 安裝 core-js
$ npm install --save core-js
複製代碼

polyfill 在 src/static/commons/scripts/utils/polyfills.js 中引入：

import 'core-js/es6/promise'
複製代碼

CSS 規範

請參照 BEM 規範，詳情見：github.com/zhaotoday/b…，下面是一個例子： HTML 代碼：

<nav class="nav">
  <a href="#" class="nav__item nav__item--normal">正常狀態</a>
  <a href="#" class="nav__item nav__item--active">當前狀態</a>
  <a href="#" class="nav__item nav__item--hover">鼠標移上時的狀態</a>
</nav>
複製代碼

Sass 代碼：

.nav {
  &__item {
    &--normal {
    }
    &--active {
    }
    &--hover {
    }
  }
}
複製代碼

基於 BEM mixin 的 Sass 代碼：

@include b(nav) {
  @include e(item) {
    @include m(normal) {
    }
    @include m(active) {
    }
    @include m(hover) {
    }
  }
}
複製代碼

響應式

@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;
  }
}
複製代碼

IE8 兼容

• 添加 es3ify-webpack-plugin，解決 es3 語法兼容問題：

$ npm install --save-dev es3ify-webpack-plugin
複製代碼

const es3ifyPlugin = require('es3ify-webpack-plugin');

// 在 Webpack plugins 配置中添加
const config = {
  plugins: [
    new es3ifyPlugin()
  ]
}
複製代碼

• 添加 es5-shim 和 es5-sham，解決 es3 環境下 es5 API 缺失問題：

<!--[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]-->
複製代碼

• 引入 selectivizr.js，使 IE8 支持 CSS3 僞類以及屬性選擇器：

<!--[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]-->
複製代碼

• 儘可能減小使用 CSS3，而且不使用 IE8 不能模擬的 ECMAScript 5 特性；
• 請用 build 的構建方案來開發調試，構建時，將 src 複製到 build-ie8/website 下，並在 build-ie8 下執行 npm run build；

目錄結構

|- build                           // Webpack 配置
|- src                             // 源碼
|    |- static                     // 靜態資源
|       |- commons                 // 公用腳本和樣式，構建成 commons.js 和 commons.css
|          |- components           // 組件集合
|             |- my-component      // my-component 組件
|                |- images         // 頁面引用圖片
|                |- styles         // 樣式
|                   |- index.scss
|                   |- images      // CSS 引用圖片
|          |- scripts              // 腳本
|             |- index.js          // 須要引入 components 中的全部樣式文件和 styles/index.scss
|             |- utils
|          |- styles               // 樣式
|             |- index.scss
|             |- reset.scss        // 重置
|             |- fonts.scss        // 字體
|             |- classes           // 樣式類
|             |- images            // CSS 引用圖片
|       |- my-view                 // my-view 頁面
|          |- images               // 頁面引用圖片
|          |- scripts              // 腳本
|             |- index.js
|             |- utils
|          |- styles               // 樣式
|             |- index.scss
|             |- images            // CSS 引用圖片
|    |- views                      // 頁面
|       |- commons                 // 公用組件、代碼塊等
|          |- components           // 組件集合
|             |- my-component.ejs  // my-component 組件
|          |- snippets             // 代碼塊，在各頁面的 html 模板中引入
|             |- head.ejs          // 頭部，也就是 <head> 標籤
|             |- foot.ejs          // 底部，如：在頁面底部引入的公用 JS、統計代碼等
|       |- my-view.ejs             // my-view 頁面
|    |- mock                       // mock 數據
|       |- data                    // 配置數據
|          |- global.json          // 全局配置數據
|          |- my-view.json         // my-view 頁面配置數據
|    |- assets                     // 公用靜態資源
|       |- scripts                 // 腳本
|          |- libs                 // JS 庫
|          |- utils                // JS 工具集合
|       |- styles                  // 樣式
|          |- utils                // Sass 工具集合
|             |- functions.scss    // 函數
|             |- mixins.scss       // 混合
|             |- variables.scss    // 變量
複製代碼