這篇文章簡單概述webpack構(gòu)建編譯各種資源的通天本領(lǐng)弹囚，幫大家簡單理解webpack如何強大到編譯各種資源（es6/es7厨相、jsx、vue鸥鹉、less蛮穿、scss、image...）毁渗。
1践磅、我們知道webpack是一個構(gòu)建、打包工具灸异。構(gòu)建各種資源府适。
以模塊為核心羔飞。
為什么模塊很重要？因為有了模塊檐春，我們就可以更方便地使用別人的代碼逻淌，想要什么功能，就加載什么模塊疟暖。但是卡儒，這樣做有一個前提，那就是大家必須以同樣的方式編寫模塊俐巴，否則你有你的寫法骨望，我有我的寫法，豈不是亂了套欣舵！---阮一峰
webpack天生支持有且只支持以下模塊打包編譯
糟糕擎鸠，我們發(fā)現(xiàn)它只能讀懂.js、.json文件缘圈。沒有看到它支持jsx劣光、TypeScript或者我們經(jīng)常寫的sass、less樣式等的編譯處理白佳椤赎线！比如less樣式寫法并不是原生css支持的，所以他怎么處理非原生模塊的語法并進行模塊化糊饱？
2垂寥、它用什么處理打包編譯其他的非原生模塊？
loaders （裝載器）
- 先通過各種loader進行解釋編譯另锋，webpack再進行模塊依賴關(guān)聯(lián)滞项。
以css為例，你一定見過夭坪，或者知道聽到過文判，less-loader、sass-loader諸如此類的loader室梅。
const Webpack = require('webpack');//引入webpack模塊
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: "style-loader"}, // 把 模塊導(dǎo)出的內(nèi)容作為樣式并添加到 DOM 中
{loader: "css-loader"}], //加載 CSS 文件并解析 import 的 CSS 文件戏仓，最終返回 CSS 代碼
}, {
//less-loader，加載并編譯less文件
test: /\.less$/,
use: [
{loader: "style-loader"},
{
loader: "css-loader", options: {
modules: {localIdentName: "[path][name]-[local]-[hash:5]"}
}
},
{loader: "less-loader"},
]
},
]
}
};
沒錯亡鼠，就是用這些裝載器把這些非原生樣式語法寫法轉(zhuǎn)成單純原生的css規(guī)則：index.less => index.css赏殃，現(xiàn)在通過這些loader的編譯轉(zhuǎn)換，瀏覽器可以讀懂了间涵。
那么還有哪些常用的loader仁热？
以babel-loader為例，為什么需要它勾哩。
由于 JavaScript 發(fā)展的速度非晨勾溃快举哟，但是瀏覽器發(fā)展得慢一些，并且用戶的升級速度也慢一些迅矛，因此有時在 web 上妨猩，不得不使用較舊的 JavaScript / ECMAScript 版本。
例如我們開發(fā)中常寫的es6诬乞、es7册赛、n...钠导，所以需要babel來編譯進行轉(zhuǎn)換為ES5兼容的語法震嫉。
所以：webpack把大部分編譯轉(zhuǎn)換的工作交給loader，這些loader把瀏覽器不支持的語法編譯成兼容的語法牡属，或是幫我們減少工程化的手動操作票堵。
對于語法轉(zhuǎn)換，往更深層次的奧義逮栅，就是涉及babel原理悴势，AST語法樹，一般loader都會經(jīng)過3個步驟：
- 1解析–2轉(zhuǎn)換–3生成
就是例如把es6語法解析成ast語法樹措伐，轉(zhuǎn)換成es5特纤，生產(chǎn)新的js文件。
篇幅概念性太強侥加，請看總結(jié)捧存。
總結(jié)：webpack能bundle任何的靜態(tài)資源的功勞就是loader。
參考：
