这篇文章简单概述webpack构建编译各种资源的通天本领，帮大家简单理解webpack如何强大到编译各种资源（es6/es7、jsx、vue、less、scss、image...）。
1、我们知道webpack是一个构建、打包工具。构建各种资源。
以模块为核心。
为什么模块很重要？因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！---阮一峰
webpack天生支持有且只支持以下模块打包编译
糟糕，我们发现它只能读懂.js、.json文件。没有看到它支持jsx、TypeScript或者我们经常写的sass、less样式等的编译处理啊！比如less样式写法并不是原生css支持的，所以他怎么处理非原生模块的语法并进行模块化？
2、它用什么处理打包编译其他的非原生模块？
loaders （装载器）
- 先通过各种loader进行解释编译，webpack再进行模块依赖关联。
以css为例，你一定见过，或者知道听到过，less-loader、sass-loader诸如此类的loader。
const Webpack = require('webpack');//引入webpack模块
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: "style-loader"}, // 把 模块导出的内容作为样式并添加到 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"},
]
},
]
}
};
没错，就是用这些装载器把这些非原生样式语法写法转成单纯原生的css规则：index.less => index.css，现在通过这些loader的编译转换，浏览器可以读懂了。
那么还有哪些常用的loader？
通过loader名称我们就可以大概知道每个loader的作用了
以babel-loader为例，为什么需要它。
由于 JavaScript 发展的速度非常快，但是浏览器发展得慢一些，并且用户的升级速度也慢一些，因此有时在 web 上，不得不使用较旧的 JavaScript / ECMAScript 版本。
例如我们开发中常写的es6、es7、n...，所以需要babel来编译进行转换为ES5兼容的语法。
所以：webpack把大部分编译转换的工作交给loader，这些loader把浏览器不支持的语法编译成兼容的语法，或是帮我们减少工程化的手动操作。
对于语法转换，往更深层次的奥义，就是涉及babel原理，AST语法树，一般loader都会经过3个步骤：
- 1解析–2转换–3生成
就是例如把es6语法解析成ast语法树，转换成es5，生产新的js文件。
篇幅概念性太强，请看总结。
总结：webpack能bundle任何的静态资源的功劳就是loader。
参考：
网友评论