Vuejs学习笔记(三)-1.webpack静态模块化打包工具-初步使用

一、webpack有何用？

问题1：前端的代码：样式less，浏览器不能读取less文件。

问题2：前端代码，es6的代码，部分版本低的浏览器只能读取解析es5的代码。

问题3：前端规范 CommonJS,AMD,CMD,ES6，浏览器如果没有底层支撑，则识别不了CommonJS,AMD,CMD.而部分浏览器可以识别ES6规范，还有浏览器识别不了ES6规范。

问题4：模块化的开发（css,js,jpg等文件类型都是模块化开发），导致模块之间有复杂的依赖关系网。

问题5：grunt/gulp核心是task，（图片压缩，scss转成css,es6转换成es5）,自动化执行task但是grunt/gulp处理不了复杂的模块化开发及模块关系。

 

解决以上问题就需要用webpack.

 

 

二、webpack的依赖环境

Node,node环境中有一个工具 Npm,用于管理node环境下的各种包，是包管理工具

三、webpack环境安装

1.全局安装

npm install webpack@3.6.0 -g

2.局部安装

npm install webpack@3.6.0 --save-dev

 

四、在Html引用CommonJS规范的JS代码，看浏览器是否识别

1.main.js是使用CommonJS规范的JS代码

 

 2.mathUtils.js中使用CommonJS规范的代码

 

 

3.html引用js

 

 

 4.打开浏览器控制台：

 

 

 以上报错就说明浏览器不识别CommonJS的规范。

 

五、在Html引用ES6规范的JS代码，浏览器可以识别

1.info.js

 

 

2.main.js

 

 

3.浏览器可以识别ES6的规范

 

 

 

 六、使用webpack打包来时浏览器识别commonJS的代码

1.dist文件夹用于存放打包文件的目录

在命令行输入：webpack ./src/main.js -o ./dist/bundle.js

 

 2.去dist下查看是否打包成功，打包的代码是做过丑化炒作的，这个减少了代码量

 

 3.html中引用打包文件，而无需引用其他js文件，info.js,mathUtils.js，说明webpack帮我们处理了模块之间的依赖关系。

 

 

 

 4.重新浏览html

此时浏览器就可以解析webpack转换CommonJS后的main.js文件了。