# 第三单元(webpack的应用-能根据具体的需求构建对应的开发环境)

# 课程目标

  1. 理解什么是单页面应用。
  2. 掌握单页面和多页面的差异。
  3. 了解单页面的实现原理。
  4. 掌握模块化的方式实现webpack配置,区分线上环境和开发环境,能够快速切换对应的配置。

# 知识点

  1. 单页面应用(spa),是仅仅使用一个html页面,结合javaScript以及页面url地址模拟出多页面的页面跳转效果。

  2. 要实现单页面应该要解决的几个问题是

    • 如何建立视图和url地址的对应关系
    • 如何更加方便的表示并且管理视图
    • 如何通过javaScript改变url地址,但是不让页面向服务端发起请求
    • 如何监听url地址的变化
  3. 学习使用webpack-merge,根据不同的环境编写不同的配置,可以复用公共的配置。

  4. 使用以下目录结构去编写webpack配置

-- webpackConfig
    -- config.js
    -- webapck.base.js
    -- webpack.dev.js
    -- webpack.devServer.js
    -- webpack.pro.js  
1
2
3
4
5
6

# 授课思路

# 案例和作业

  1. 自己定义单页面的开发方式

  2. 使用webpack搭建出一个单页面的应用程序的开发环境