前端知识点总结——蔚来一面面经 / webpack打包的入口 / loader和plugin的区别 / 语义化代码 / Vue路由守卫

webpack打包的入口

在vue-cli3中查看webpack的配置信息，输入vue inspect > output.js

1. entry 入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/main.js

  entry: {
    app: [
      './src/main.js'
    ]
  }

2. output 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

  output: {
    path: '/Users/zhangzhenkun/Desktop/JS高级/VueTest/vue_test/dist',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  }

loader和plugin的区别

1. Loader 本质就是一个函数，将一个语言转换为另一个语言。webpack自身只支持js和json这两种格式的文件，对于其他文件需要通过loader将其转换为commonJS规范的文件后，webpack才能解析到
   css-loader：加载 CSS
   style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
   image-loader：加载并且压缩图片文件

2. Plugin 就是插件，在打包前和打包后对结果再次进行操作。是用于在webpack打包编译过程里，在对应的事件节点里执行自定义操作，比如资源管理、bundle文件优化等操作。
   uglify-webpack-plugin：丑化代码
   ignore-plugin：忽略部分文件
   babel-polyfill：es5转换为es6

语义化代码

1. 意义：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2. 作用：
   1. 在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
   2. 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息
   3. 便于团队开发和维护，语义化更具可读性
3. 新增的语义化标签：header footer nav audio video

Vue路由守卫

路由守卫执行顺序：

路由守卫可以简单描述为路由跳转过程中的一些钩子函数，在路由跳转的过程中通过定义一些函数执行一些操作。

• 完整的导航解析流程：

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

当点击切换路由时：
beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>beforeCreate–>created–>beforeMount–>mounted–>beforeRouteEnter的next的回调

主要应用场景：使用路由守卫实现用户登陆跳转例子讲解