webpack 提取 css 文件

课程说明

程序员/工程师 + 设计能力 = 无限可能

Idea → Design → Code：本课程将从 0 开始自己设计一个简洁的网站，并写代码将自己完成的网站 Web UI 设计稿转成 HTML + CSS + JS 静态页面格式。同时学习「设计」与「前端开发」思想及基本技能。

适宜人群

• 对设计感兴趣的工程师
• 对编程感兴趣的设计师

课程大纲

1. 设计

• 课程介绍
• 什么是设计
• 如何选择设计工具
• Adobe XD 初探
• 如何选择设计稿的画布大小
• 开启画布的网格辅助线
• 如何确定导航栏高度
• 如何选择字体
• 字体大小、字重、行高
• 间距
• 颜色基础知识
• 调整设计稿的颜色
• 首页 - 主副标题
• 首页 - 文章列表
• 首页 - pagination、footer、sidebar
• 详情页面
• 标签页面
• 组件复用、避免多处修改
• 关于页面
• 设计阶段小结

2. 搭建前端开发环境

• 现代前端开发方式及 webpack 简介
• hello webpack
• 增加 webpack 配置文件及清理 dist 目录
• 增加 html-webpack-plugin 及 webpack-dev-server 功能
• 增加 sass-loader 让 webpack 处理 scss 样式文件
• webpack 提取 css 文件
• 配置 webpack 的开发模式及生产模式
• webpack 生产模式下压缩 css 文件
• 使用 file-loader 及 html-loader 处理图片
• 增加 babel-loader
• 增加 webpack 多入口配置
• 通过 postcss-loader 及 autoprefixer 自动增加 css 浏览器前缀

3. 前端开发

• 引入 bootstrap
• 导航栏
• bootstrap 默认字体、导航颜色、断点介绍
• 主副标题
• 文章列表
• 分页
• 底部
• 侧边栏
• 标签页面
• scss 文件结构微调，抽取 header、footer
• 文章详情 - 正文
• 文章详情 - 目录
• 关于页面
• 课程回顾