常见的Vue命令
1:npm i webpack -g 全局安装webpack。
2:npm i webpack --save-dev 安装到项目依赖中。
3:npm init -y 创建package.json文件。
4:npm i jquery -S 安装jquery。
目录:
1:静态资源
2:网页中引入的静态资源多了以后有什么问题???
3:如何解决上述两个问题
4:什么是webpack?
5:如何完美实现上述的2种解决方案
6:webpack安装的两种方式
1:在网页中会引用哪些常见的静态资源?
+ JS
- .js .jsx .coffee .ts(TypeScript 类 C# 语言)
+ CSS
- .css .less .sass .scss
+ Images
- .jpg .png .gif .bmp .svg
+ 字体文件(Fonts)
- .svg .ttf .eot .woff .woff2
+ 模板文件
- .ejs .jade .vue【这是在webpack中定义组件的方式,推荐这么用】
2:网页中引入的静态资源多了以后有什么问题???
1. 网页加载速度慢, 因为 我们要发起很多的二次请求;
2. 要处理错综复杂的依赖关系
3:如何解决上述两个问题
1. 合并、压缩、精灵图、图片的Base64编码
2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系;
4: 什么是webpack?
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
5:如何完美实现上述的2种解决方案
1. 使用Gulp, 是基于 task 任务的;
2. 使用Webpack, 是基于整个项目进行构建的;
+ 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
+ 根据官网的图片介绍webpack打包的过程
+ [webpack官网](http://webpack.github.io/)
6:webpack安装的两种方式
1. 运行`npm i webpack -g`全局安装webpack,这样就能在全局使用webpack的命令
2. 在项目根目录中运行`npm i webpack --save-dev`安装到项目依赖中