Vue.js学习No.5(WebPack)

• 欢迎关注个人公众号

• 学习的内容以下

• 开始

• npm的使用 npm安装一些包会出现问题，极可能问题的缘由是咱们的网络。npm 的包的安装源有挺多，默认是npm，若是在国内，咱们能够把安装源切换成taobao，这样安装的速度会快不少。

# 先用 npm 安装 nrm 小工具
npm install nrm --global

# 安装后查看如今的 npm 的安装源
nrm ls

# 切换使用 taobao 做为 npm 的安装源
nrm use taobao

# 查看当前安装源用的是什么
nrm ls
复制代码

注意有时候你使用taobao 做为安装源也可能会遇到一些问题，这时候能够暂时再把安装源再切换成原来的 npm 。

webpack

• 网页中静态资源

• JS

  • .js .jsx .coffee .ts(TypeScript C#)

• CSS

  • .css .less .sass(基本上没有人用了) .scss

• Images

  • .jpe .png .gif .bmp .svg

• 字体文件

  • .svg .ttf .eot .woff .woff2

• （Fonts） 模板文件

  • .ejs .jade .vue(在weppack中定义组件的方式，推荐使用)

• 网页中静态资源多了的问题？

• 一、加载速度慢，由于咱们要发起不少的二次请求；

• 二、要处理赋复杂的依赖关系

• 如何解决问题？

• 一、合并、压缩、精灵图、图片的Base64编码（url直接指向Base64）

• 二、使用requireJS、也可使用webpack能够解决依赖关系

• 什么是webpack？

• webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。基于Node.js 开发出来的前端工具

webpack

• 完美的解决方法

• 一、基于Gulp，基于 task 任务的

• 二、使用webpack，是基于整个项目进行构建的

  • webpack自动化构建工具，能够完美的实现资源的合并、打包、压缩、混淆等诸多功能

• webpack的案例

• jQuery 是一个快速、简洁的JavaScript框架，是继Prototype以后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，作更多的事情。它封装JavaScript经常使用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操做、事件处理、动画设计和Ajax交互。

• 装jquery 一、npm init

  

  二、 npm i jquery -s

  

  三、 自动生成

  

• 因为ES6的代码，过高级了，浏览器解析不了，因此，这一行执行会报错import $ from 'jquery'

  

• 如何解决呢？使用webpack帮助咱们处理。 一、安装webpack npm i webpack -g npm i webpack -g 全局安装webpack，这样可以全局使用webpack

二、在项目的根目录中运行 npm i webpack --save -dev 安装到项目的依赖中去

• 使用webpack打包构建 一、运行 npm init 初始化项目，使用npm管理项目中的依赖包 二、建立项目的目录结构

  

  三、使用 npm i jquery --save 安装jQuery的依赖包 四、建立 main,js并书写代码逻辑 五、webpack .\src\main.js -o .\dist\bundle.js最新的打包命令,意思是 ： webpack 入口文件路径 输出文件的路径

  

• 打包完成

  

webpack 能作什么事情

• 1 、webpack 可以处理 JS 文件的互相依赖关系：理想状态一个项目只有一个main.js 可是不推荐
• 二、webpack 可以处理Js的兼容的问题，把高级的浏览器不识别的语法转化为低级的浏览器可以执行的
• 运行的命令格式 ：webpack 要打包的文件的路径 -o 输出文件的路径