# 第三单元(webpack的应用-能根据具体的需求构建对应的开发环境)
# 课程目标
- 理解什么是单页面应用。
- 掌握单页面和多页面的差异。
- 了解单页面的实现原理。
- 掌握模块化的方式实现webpack配置,区分线上环境和开发环境,能够快速切换对应的配置。
# 知识点
单页面应用(spa),是仅仅使用一个html页面,结合javaScript以及页面url地址模拟出多页面的页面跳转效果。
要实现单页面应该要解决的几个问题是
- 如何建立视图和url地址的对应关系
- 如何更加方便的表示并且管理视图
- 如何通过javaScript改变url地址,但是不让页面向服务端发起请求
- 如何监听url地址的变化
学习使用webpack-merge,根据不同的环境编写不同的配置,可以复用公共的配置。
使用以下目录结构去编写webpack配置
-- webpackConfig
-- config.js
-- webapck.base.js
-- webpack.dev.js
-- webpack.devServer.js
-- webpack.pro.js
1
2
3
4
5
6
2
3
4
5
6
# 授课思路
# 案例和作业
自己定义单页面的开发方式
使用webpack搭建出一个单页面的应用程序的开发环境