Vue(14) —— webpack学习使用

---

1.什么是webpack

    WebPack 是一款模块加载器兼打包工具，它能把各类资源，如 JS、JSX、ES六、SASS、LESS、图片等都做为模块来处理和使用

2.为什么要使用webpack

    因为现在很多浏览器都还停留在ES5规范，但是我们编写前端代码的时候需要使用到EES6的规范和新特性，所以这就导致了我们按照ES6写的代码浏览器解析不了，所以我们需要使用webpack将我们写的ES6规范的前端代码自动转为ES5规范，这样几乎所有浏览器就可以运行我们的前端程序了

---

3.安装webpack

安装

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

配置
建立 webpack.config.js 配置文件

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

---

4.使用webpack

1. 建立项目
   

2. 建立一个名为 models 的目录，用于放置 JS 模块等资源文件
   

3. 在models下建立模块文件，如 hello.js，用于编写 JS 模块相关代码

4. 在models下建立一个名为 main.js 的入口文件，这个文件名称随便取，但是为了规范和代码的可读性，我们遵守官方推荐文件命名规范，将入口文件命名为main.js；当然，不是你写一个main.js它就变成了整个js的models中的文件入口了，我们还需要在打包的时候指定它作为程序的入口它才真正变成了整个js文件model的入口执行文件/程序
   
   
   

5. 在项目目录下建立 webpack.config.js 配置文件，并配置entry和output两个属性
   
   

6. 在项目目录下建立 HTML 页面，如 index.html(官方命名规范)，导入 WebPack 打包后的 JS 文件
   

7. 在IDEA控制台中直接执行webpack;若是失败的话,就使用管理员权限运行便可!
   
   
   
       所以index.html只需要导入这一个js文件即可使用我们在model中定义的所有js的功能

8. 运行 HTML 看效果
   
   说明

# 参数 --watch 用于监听变化，即实现我们js文件的热部署
# 只要你修改了js文件，就马上自动打新的整合js文件应用到前端
webpack --watch

---

5.小结

• 从上面webpack的使用例子来看，webpack就是将所有的js文件融合为一个js文件，并将其语法从ES6转为ES5语法规范
• 这样做的好处就是使得前端要实现复杂功能的js代码可以分模块进行开发，在开发的时候需要被调用的模块就显式的声明自己要导出的模块；在main.js中就显式的引入(require(“js子模块文件路径”))需要导入的子模块，即可在main.js中调用其他子model中的方法实现功能
• 在开发中index.html基本是不需要改动的，创建好了之后直接引入我们使用webpack打包输出的js文件即可，最后就是修改一下title标签的值