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文件了。
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14972938.html