webpack 中的 babel 的配置| 学习笔记

简介: 快速学习 webpack 中的 babel 的配置

开发者学堂课程前端自动化构建工具 Webpackwebpack 中的 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’,age20}

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.loganimal.info

//这是实例属性:

Console.logal.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

相关文章
|
1月前
|
人工智能 移动开发 前端开发
【利用AI让知识体系化】Webpack 相关配置技巧(三)
【利用AI让知识体系化】Webpack 相关配置技巧
|
1月前
|
人工智能 缓存 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(二)
【利用AI让知识体系化】Webpack 相关配置技巧
|
1月前
|
人工智能 前端开发 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(一)
【利用AI让知识体系化】Webpack 相关配置技巧
|
1月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
11 0
|
1月前
|
编解码 资源调度 前端开发
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
15 0
|
2月前
|
JavaScript 应用服务中间件 nginx
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
60 0
|
2月前
|
编解码 JavaScript 前端开发
Node.JS学习 | Babel | webpack | ES6
Node.JS学习 | Babel | webpack | ES6
40 0
|
2月前
|
JSON JavaScript 前端开发
Webpack的ts的配置详细教程
Webpack的ts的配置详细教程
34 0
|
2月前
|
缓存 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
31 0
|
2月前
|
前端开发 JavaScript 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
27 0