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的工作流程也和編譯器一樣：

解析階段

轉換階段

生成階段