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-env

Babel的底层原理

babel可以看成一个编译器，将源代码转换成浏览器可以直接识别的另一段源代码

babel的工作流程也和编译器一样：

解析阶段

转换阶段

生成阶段