继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【学习打卡】第2天 前端工程师2022版 webpack 第一讲

artimis_new
关注TA
已关注
手记 39
粉丝 3
获赞 19

课程名称:前端工程师2022版

课程章节: webpack入门

主讲老师:elex

课程内容:

今天学习的内容包括:

webpack是什么?webpack初体验

课程收获:

Webpack入门

------

Webpack是什么


定义:静态模块打包器,当 webpack 处理应用程序时,会将所有这些模块打包成一个或多个文件


模块----Webpack 可以处理 js/css/图片、图标字体等单位


静态----开发过程中存在于本地的 js/css/图片/图标字体等文件,就是静态的


动态----从远程服务器获取到的,动态的内容,Webpack无法处理


初始化项目

npm init----输入名字----生成package.json文件


安装webpack需要的包

npm install --save-dev babel-loader @babel/core


配置webpack

在根目录中新建文件webpack.config.js并添加语句(from webpack官网)


编译

在package.json文件的script{}中添加:"webpack": "webpack --config webpack.config.js"(让babel可以通过package.json调用webpack.config.js)


npm run webpack,得到dist目录--bundle.js文件

*检验

webpack.config.js文件中module.exports={}中添加mode:“deve”,改成开发模式检验转换后的代码


*测试

测试编译后的文件能否被引入并在浏览器中正常执行



webpack与babel关系与区别


1、babel是一个JS编译器,用来将ES6/ES7等语法转换为ES5语法(浏览器不认识的语法编译成浏览器认识的语法),从而能够使代码在大部分浏览器中运行。但是babel转换语法时有一些新的api是不转化的,比如promise、Object.assign等,所以babel还提供了很多插件,如babel-polyfill。


2、webpack是一个打包工具,打包js、css、图片、html等,它可以分析整个项目的文件结构,确认文件之间的依赖,将文件合成、压缩、加入hash等,生成最终项目文件。webpack把所有文件当成模块,但是webpack内置默认的加载器是处理js的,如果要处理其他类型的文件则需要引入不同的loader加载器,用来转化其他文件进行编译打包。webpack通过使用babel-loader使用Babel


webpack.config.js (module.rules 允许你在 webpack 配置中指定多个 loader)


总结:


webpack和babel通常配合起来使用


babel是js编译工具,能将es6或者一些特殊语法做一些转换,只做文件转义,不做文件整合。


webpack是一个打包工具,内置只能处理js,但是它可以加载很多的loader处理css,img,ts,vue等其他文件,最终输出js文件。


webpack通过使用babel-loader使用Babel



打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP