Webpack

页面中的静态资源

常见的静态资源

js

.js .jsx .coffee .ts

css

.css .less .sass .scss

images

.jpg .png .gif .bmp .svg

字体文件

.svg .ttf .eot .woff .woff2

模板文件

.ejs .jade .vue

静态资源过多带来的问题

1． 网页加载速度慢，要发起二次请求

2． 处理错综复杂的依赖关系

解决上述问题

1． 合并、压缩、精灵图、图片的Base64编码

2． 可以使用requireJS，也可以使用webpack解决各个包之间的复杂依赖关系

Webpack可以做什么

1． webpack能够处理js文件的相互依赖关系

2． webpack能够处理js的兼容问题，把高级的、浏览器不识别的语法转换为低级的、浏览器能正常是别的语法。

webpack 要打包的文件的路径 将打包好的文件路径保存到哪。

3． 将不同的文件类型进行打包，webpack中只能打包js文件，要想打包不同文件类型的文件，需要使用webpack-loader进行打包

webpack中如何使用vue

1． 安装vue的包

2． 由于在webpack中推荐使用.vue这个组件模板文件定义组件，所以需要安装能解析这种文件的loader

npm I vue-loader vue-template-complier –D

1． 在main.js中导入vue模块

import Vue from ‘vue’

4． 定义一个.vue结尾的组件，其中组件有三部分组成：template script style

5． 使用import login from ‘./login.vue’导入这个组件

6． 创建vm实例

var vm = new Vue({el:’#app’,render:c=>c(login)})

7． 在页面中创建一个id为app的div元素，作为vm实例要控制的区域