Webpack的基本使用 - babel
Mode配置
Mode配置选项可以告知Webpack使用相应模式的内置优化
默认值是production（什么都不设置的情况下）
可选值有：'none' | 'development' | 'production';
这几个选项有什么区别呢？
认识source-map
我们的代码通常运行在浏览器上时可以打包压缩
真实跑在浏览器上的代码和我们编写的代码有差异
ES6的代码可能被转成ES5
对应的代码行号和列号在经过编译后肯定不一致
代码进行丑化压缩时会将编码名称等修改
使用TypeScript编写的代码最终转成JS
原始源的时候，调试转换后的代码（打包后的代码）是很困难的
因为我们不能保证代码不出错
如何调试转换后不一致的代码呢？
就是用source-map
source-map是从已经转换的代码到原始的源文件
使浏览器可以重构原始源并且在调试器中显示重建的原始源
如何使用source-map
第一步：根据源文件，生成source-map文件，webpack在打包时，可以通过配置生成source-map
const path = require('path');module.exports = {mode:'development',entry:'./src/index.js', devtool:'source-map',output:{path:path.resolve(__dirname,'./build'),filename:"bundle.js"},
}第二步：在转换后的代码最后添加一个注释，它指向sourcemap
浏览器会根据我们的注释查找相应的source-map，根据source-map还原代码方便进行调试
在Chrome中可以按照下面的方式打开source-map
最初source-map生成的文件大小是原始文件的十倍，第二版减少了百分之五十，第三版又减少了百分之五十
目前一个133kb的文件，最终的source-map的大小在300kb
目前的source-map长什么样
version：当前使用的版本，也是最新的第三版
sources：从哪些文件转换过来的source-map和打包的代码（最初始的文件）
names：转换前的变量和属性名称
mapping：source-map用来和源文件映射的信息，一串base64 VLQ编码
file：打包后的文件（浏览器加载的文件）
sourceContent：转换前的具体代码信息（和source是对应关系）
sourceRoot：所有的sources相对的根目录
devtool可以设置二十六个值
选择不同的值生成的source-map会略有差异，打包的过程也会有性能的差异，可以根据不同的情况进行选择
为什么需要babel
想要用ES6和TypeScript就得会babel
babel可以作为独立的工具来使用
安装：
npm install @babel/core @babel/cli -D安装个插件：
npm install @babel/plugin-transform-block-scoping -D使用插件：
npx babel ./src --out-dir ./build --plugins=@babel/plugin-transform-block-scoping//const定义常量（ES6）
const message = 'Hello World';
console.log(message);const foo = ()=>{console.log("foo function exec!");
}
foo();使用完插件文件就发生了转化：
//const定义常量（ES6）
var message = 'Hello World';
console.log(message);
var foo = () => {console.log("foo function exec!");
};
foo();bebel每使用一种转换都要新安装东西和对应的命令也太麻烦了
所以babel给我们提供了preset预设
npm install @babel/preset-env -D使用预设：
npx babel ./src --out-dir ./build --presets=@babel/preset-envBabel的底层原理
babel可以看成一个编译器，将源代码转换成浏览器可以直接识别的另一段源代码
babel的工作流程也和编译器一样：
解析阶段
转换阶段
生成阶段
