webpack与前端路由

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

 

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

 

前端自动化工程主要解决以下问题：

JavaScript、CSS代码的合并和压缩

CSS预处理：Less、Sass、Stylus的编译

生成雪碧图

ES6转ES5

模块化

 

 

生成Source Maps（使调试更容易）

开发总是离不开调试，方便的调试能极大的提高开发效率，不过有时候通过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮我们解决这个问题的。

通过简单的配置，webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。

对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它

Loaders:

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，

单文件组件与vue-loader：

vue单文件组件就是一个后缀名为.vue的文件，在webpack中使用vue-loader就可以对.vue格式的文件进行处理。

一个.vue文件一般包含3部分，即<template>、<style>、<script>

 

 

webpack的主要使用场景是单页面富应用(SPA),而SPA的核心就是前端路由

前后端完全分离的开发模式：

后端只提供API来返回数据，前端通过Ajax获取数据后，再用一定的方式渲染到页面里。

SPA的组成就是在前后端分离的基础上加一层前端路由，前端路由的实现有两种：

1.利用url的hash,就是常说的锚点#,JavaScript通过hashChange事件来监听url的改变。

2.HTML5的History模式。

 

什么是前端路由：

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的

什么时候使用前端路由：

在单页面应用，大部分页面结构不变，只改变部分内容的使用

前端路由的优点有很多：

页面持久性 、前后端彻底分离，不需要每次都从服务端获取，快速展现给用户

缺点：

不利于SEO

使用浏览器的前进、后退键的时候会重新发送请求，没有合理的利用缓存

单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

 

 动态路由：

 

 嵌套路由：

 

Vue Router:

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

 

axios：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

 

$route和$router的区别：

$route表示当前路由信息对象：

 

https://www.jianshu.com/p/fa0b5d919615

webpack入门教程：https://www.jianshu.com/p/42e11515c10f