基于 Webpack 开发、构建多页面站点的前端工程化方案

简介

基于 Webpack 开发、构建多页面站点(普通 Web 站点)的前端工程化方案,同时适用于 PC 端和移动端。

开发 PC 端网站时,如果需要兼容 IE8,请尽量少使用 CSS3,并且不使用 IE8 不能模拟的 ECMAScript 5 特性。

功能

  • 前端工程化
  • 多项目共存
  • 支持响应式
  • 模块化
  • 组件化
  • 开发、调试和构建
  • 集成 PostCSS、Sass
  • JS 代码规范性校验
  • CSS 代码规范性校验

项目地址

https://github.com/zhaotoday/webpack-website

线上例子

建议在手机或 Chrome 的设备模拟器上打开。

相关参考

使用

1. 命令

# 下载代码
$ git clone https://github.com/zhaotoday/webpack-website.git
# 安装依赖
$ npm install
# 开发、调试
$ npm start
# 构建
$ npm run build
# 按 Standard 规范校验 JS 代码
$ npm run eslint
# 按 Standard 规范代码格式化 JS 代码
$ npm run eslintfix
# 校验 CSS 代码
$ npm run stylelint

2. 修改 Webpack 配置

  • 新增 /build/utils/consts/projects/{your-project}.js
  • 参考 play.js 配置 PROJECT、PAGES、CDN 常量,注意 PAGES,将其配置成自己开发的页面。

3. 开发网站页面

在文件夹 /src/projects/{your-project}/pages 下开发网站页面,页面文件夹命名与第 2 步的配置相对应。

兼容性

  • PC 端:IE8+(含 IE8);
  • 移动端:主流浏览器;

添加 polyfill

用 ES6 开发移动端网站时,可按需引入 polyfill,提高浏览器兼容性。

# 安装 core-js
$ npm install --save core-js

polyfill 在 /src/projects/{your-project}/scripts/utils/polyfill.js 文件中引入:

样式编写规范

请参照 BEM 规范,详情见:https://github.com/zhaotoday/bem,下面是一个例子:
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]-->

如果无需兼容 IE8,请去掉以上相关操作!

组件化

将通用模块(如:面板、列表和 tab 菜单等)写成组件,提高代码复用率。组件放置在文件夹 /src/commons/components 下。

目录结构

|-- build                                    // Webpack 配置
|-- src                                      // 源码目录
|   |-- projects                             // 项目集合
|       |-- play                             // play 项目(举例)
|           |-- pages                        // 网站页面
|               |-- home                     // 首页(举例)
|                   |-- images               // 首页图片
|                   |-- scripts.js           // 首页脚本
|                   |-- styles.scss          // 首页样式
|                   |-- template.html        // 首页 html 模板
|               |-- news                     // 新闻页面(举例)
|           |-- commons                      // 公用代码
|               |-- components               // 公共组件
|                   |-- panel                // 面板组件(举例)
|                       |-- images           // 面板组件相关图片
|                       |-- styles.scss      // 面板组件相关样式
|                   |-- list                 // 列表组件(举例)
|               |-- requires                 // 公用代码块,在各页面的 html 模板中引入
|                   |-- head                 // 头部代码块,也就是 <head> 标签
|                   |-- foot                 // 底部代码块,如:在页面底部引入的公用 JS、统计代码等
|                   |-- header               // 页面头部展示内容,如:导航菜单等
|                   |-- footer               // 页面底部展示内容,如:页脚导航链接、版权信息等
|           |-- scripts                      // 脚本
|               |-- libs                     // JS 库
|               |-- utils                    // 一些 JS 工具集合
|                   |-- helpers.js           // 帮助函数集合
|                   |-- consts .js           // 常量配置
|                   |-- polyfill.js          // polyfill
|           |-- styles                       // 样式
|               |-- global                   // 全局样式
|                   |-- reset.scss           // 样式重置
|                   |-- classes              // 样式类
|               |-- utils                    // 样式工具集合
|                   |-- functions.scss       // SASS 函数
|                   |-- mixins.scss          // SASS 混合
|                   |-- variables.scss       // SASS 变量
|   |-- scripts                              // 脚本(全局)
|       |-- libs                             // JS 库
|       |-- utils                            // 一些 JS 工具集合
|           |-- helpers.js                   // 帮助函数集合
|   |-- styles                               // 样式(全局)
|       |-- utils                            // 样式工具集合
|           |-- functions.scss               // SASS 函数
|           |-- mixins.scss                  // SASS 混合
|           |-- variables.scss               // SASS 变量