这是我参与「 第四届青训营 」笔记创作活动的第十七天
为什么要学习Webpack？
- 理解前端工程化概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
什么是Webpack
WebPack可以看做是模块打包机，本质上是一种前端资源编译、打包工具：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
使用Webpack示例
- 安装
- 编辑配置文件
- 执行编译命令
核心流程
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持TypeScript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc……
Webpack配置总览
按使用频率
- 'entry/output'
- 'module/plugins'
- 'mode'
- 'watch/devServer/devtool'
Loader的作用
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
常用Loader
css-loader
我们的css打包文件中可能会引入其它的css文件，而css-loader的作用就相当于把这些相互依赖的css文件合并成一个css文件。
style-loader
我们需要打包的css文件在经过sass-loader的翻译，css-loader的合并之后，style-loader的作用就是把合并后的css文件挂载到页面的head中来渲染出页面的样式。
