开发者学堂课程【前端自动化构建工具 Webpack：webpack 中的 babel 的配置】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8225
webpack 中的 babel 的配置
举例解释
" dev ":＂ webpack - dev - server -- open -- port 3000-- hot ＂
1O " keywords ":[],
11 " author ":＂",
"1icense":＂ ISC ",
" devDependencies ":{
" css - loader ":＂A0.28.7",
15 " file - loader ":＂1.1.5",
16 " html - webpack - plugin ":＂A2.30.1",
17 " less ":＂へ2.7.3",
18 " less - loader ":＂4.0.5",
19 " node - sass ":＂A4.5.3",
20 " sass - loader ":ПА6.0.6",
21 " style - loader ":п~0.19.0",
22 "ur1-loader":＂A0.6.2",
23 " webpack ＂:＂へ3.8.1",
24 " webpack - dev - server ":＂へ2.9.3"
25
26 " dependencies ":{
" bootstrap ":＂へ3.3.7"
console . log (' ok ')
import ＇./ css / index . css ＇ import ＇./ css / index . scss '
1/注意:如果要通过路径的形式,去引入 node modules 中相关的文件,可以直接省略路径前面的 node _ modules 这一层目录,直接写包的名称,然后后面跟上具体的文件路径
I /不写 node modules 这一层目录,默认就会去node modules 中查找 import ' bootstrap / dist / css / bootstrap . css '
node _ modules 这一层目录,直接写包的名称,然后后面跟上具体的文件路径71/不写node modules 这一层目录,默认就会去node modules 中查找8import' bootstrap / dist / css / bootstrap . css '
10 1/ class 关键字,是eS6中提供的新语法,是用来实现ES6中面向对象编程的方式
11 class Person {
12 11使用 static 关键字,可以定义静态属性
13 1/所谓的静态属性,就是可以直接通过类名,直接访问的属性
14 static info ={ name :' zs ', age :20}
//实例属性：只能通过类的实例，来访问的属性，叫做实例属性
15static info={name：‘zs’，age：20}
17I/ Java C #实现面向对象的方式完全一样了, class 是从后端语言中借鉴过来的,来实现面向对象
18// var p1= new Person ()19
20//访问person类身上的info静态属性
//在 webpack 中默认正能处理一部分es6，一些更高级的 es6 语法，或者 es7 语法，webpack 是处理不了的。
这时候需要借助第三方的的 loader，来帮助 webpack 处理这些高级的语法。
当第三方的 loader 把高级语法转为低级语法，会把结果交给webpack去打包到bundle.js 中。
//通过 babel，可以帮我们将高级的语法转换为低级语法
//在 webpack 中， 可以运行如下两套包，去安装 babel 相关的 loader 功能。
//第一套包：
cnpm i babel-core babel-loader babel-plugin-transform-runtime -d
//第二套包：cnpm i babel - preset - env babel - preset - stage -0- D
251/2.打开 webpack 的配置文件,在 module 节点下的 rules数组中,添加一个新的匹配规则:26//2.1{ test :/八 js $/, use :' babel - loader ', exclude :/ node _ modules /}
271/2.2注意:在配置babel 的 loader 规则的时候,必须把 node modules 目录,通过 exclude
选项排除掉:原因有俩:
28
112.21如果不排除 node modules ,则 Babel 会把 node _ modules 中所有的第三方 Js 文件,都打包编译,这样,会非常消耗 cPU ,同时,打包速度非常慢;
291/2.2.2哪怕,最终,Babe1把所有 node _ modules 中的 Js 转换完毕了,但是,项目也无法正常运行!301/3.在项目的根目录中,新建一个叫做 babelrc 的Babel 配置文件,这个配置文件,属于 JSON 格
式,所以,在写 babelrc 配置的时候,必须符合 JsON 语法规范:不能写注释,字符串必须用双引号
311131在 babelrc 写如下的配置:大家可以把 preset 翻译成【语法】的意思
32 //(
33 " presets ":[" env ",＂ stage -0"],
o 出 调试控制台 售式 1: node
@ multi ./ node _ modules / webpack - dev -server2.9.webpack- dev - server / client ?http://localhost:3000 webpack / hot / dev - server ./ src / main . js Child html - webpack - plugin for " index . html ":
As5et Size Chunks Chunk Names
132974119196667f1206.hot- update . json 44 bytes [ enitted ]
+1 hidden asset 4П odules
webpack : Failed to co Т pile .
pS C :\ Users \ liulongbin \ Desktop \day6\代码\e1.webpack- study > c П pm i babel - core babel - loader babel - plugin - transform - runtime - D I [ e /3] Installing pify3.0.0
21 function Animal ( name ){
22 this . name =name
23animal info=123
var al new Animal (＇小花
//这是静态属性
//console.log（animal.info）
//这是实例属性：
Console.log（al.name）
23 { test ：ハ． less $/, use :[' style - loader ',' css - loader ',' less - loader ']},//
处理 less 文件的loader
{ test :ハ． scss $/, use :[' style - loader ',' css - loader ',＇ sass - loader ']},//处理 scss 文件的 loader
{ test ：ハ．(pgIpnglgiflbmp1jpeg)$/, use :' url - loader ? limit =7631& name =[ hash :8]-[ name ].[ ext ]＂},/／处理图片路径的 loader
1/1imit 给定的值，是图片的大小，单位是 byte ，如果我们引用的图片，大于或等于给定的 limit 值，则不会被转为 base64格式的字符串，如果图片小于给定的1imit值，则会被转为base64的字符串
{ test :八．( ttfleotIsvg I woffIwoff2)$/, use :'ur1-1oader'},/／处理字体文件的1oader
{ test :八． js $/, use :' babel - loader ', exclude :/ node _ modules /},/／配置 Babel 来转换高级的 ES 语法
29
30
I : powershel
VAll packages installed (29 packages installed from П pm registry , used 6s, speed 32.66kB/ s , json 46(181.57kB), tarball e8) PS C :\ Users \1iulongbin\ Desktop \day6＼代码＼01.webpack- study > c П pn ibabel - preset - env babel preset - stage -0-D
VInstaled 2packages
VLinked 801atest versionS VRun 0scripts
Recently updated ( since 2017-10-26):2packages( detail see file C :\ Users \ liulongbin \ Desktoplday Б＼代码＼01.webpack- study \ node _ modules \. receni ly _ updates . txt )
+ babel - preset -env1.6.1,browsersliste2.6.1caniuse-lite1.0.30000755(1.0.30000757)(14:01:04)
VAll packages installed (69 packages installed from П pm registry , used 9s, speed 52.27kB/ s , json 82(253.21kB), tarball 225.78kB)叹y8s\ uiulongbin \Desktoplday6＼代码＼01.webpack- study >0
