狂神 Vue Webpack

Webpack

是一个现代化的JavaScript应用程序的静态模块打包器（module bundler），会递归的构建依赖关系图（dependency graph）

浏览器逐渐进化到WebApp模式，通常是一个SPA（单页面应用），每一个视图通过异步通信加载，导致页面初始化和使用过程中会加载越来越多JS代码

主要为了解决代码版本不同解决兼容性规范

import    export

在JavaScript中结构都是暴露在全局模式下的，不同模块调用的都是同一个作用域，弊端

• 全局作用域容易造成变量冲突
• 只能按照< Script >的书写顺序进行加载
• 要解决模块和代码库的依赖关系
• 大型项目难以管理，长期使用混乱不堪

CommonsJS规范

服务器端的Node.js遵守CommonsJS规范，允许通过require方法加载需要的依赖，通过exports或module.exports来导出暴露的接口

• 一边暴露接口，一边导入接口，接口的作用域只在自己的作用域有效，限定了作用域范围

• 

• import HelloWorld from './components/HelloWorld'
  
  
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
  

• 

• 

优点：

• 模块便于重用
• NPM已经有超过45w个可以使用模块包
• 简单易用

缺点：

• 同步的模块加载方式不适合在浏览器环境中，意味着阻塞加载，浏览器资源是异步加载的
• 不能非阻塞的并行加载多个模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TmNlkGSq-1599780970696)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20200906200343660.png)]

之后还发展出了AMD，和CMD、Sea.js、coolie

安装Wabpack

npm install webpack -g
npm install webpack-cli -g

两个都要安装

检查两个包安装成功没

配置webpack.config.js配置

• entry:入口文件，指定WebPack用哪个文件作为项目的入口
• output：输出，指定webpack把处理完成的文件放置到指定路径
• module：模块，用于处理各种类型的文件
• plugins：插件，如：热更新、代码重用等
• resolve：设置路径指向
• watch：监听，用于设置文件改动后直接打包

Webpack Demo：

了解模块化开发概念，了解webpack打包方法，尝试watch监听热部署

• 

• 使用exports暴露和require导入接口，实现模块化

• 

• 创建webpack.config.js配置webpack打包配置，入口文件，输出位置

• 

• 打包，会产生一个打包后的js文件

• 

• 里面翻译的是用他自己的语法打包的

• 

• 

• 导入这个js包就可以看到效果了

• 

• 

• webpack --watch
  

• 事实监听，可以实现热部署，中间有两条横杠

• 只要有改动就会重新打包

• 这是一直在运行的ctrl+c终止

•