这是我参与「第四届青训营 」笔记创作活动的的第11天
为什么要学习Webpack
Webpack 可以将多种静态资源 js、css、less 等转换成一个静态文件，减少了页面的请求等等......
什么是Webpack
本质上webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
使用Webpack
核心流程：
1.入口处理'entry'
2.依赖解析'require'、'import'
⇅递归调用2、3，直到所有资源处理完毕
3.资源解析'module'
4.资源合并打包'output'
流程类配置
输入'entry' 'context'
模块解析'resolve'、'externals'
模块转译'module'
后处理'optimization' 'mode' 'target'
处理CSS
- 安装Loader
less-loader:实现less=>css的转换
css-loader:将CSS包装成类似module.exports=＂$｛css｝＂的内容，包装后的内容符合JavaScript语法
style-loader:将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签\ - 添加'module'处理css文件
接入Bebal
- 安装依赖
- 声明产物出口'output'
- 执行'npx webpack'
注：Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情：
- 转换语法
- Polyfill 目标环境中缺少的功能
- 源代码转换(codemods)
- ......
生成HTML
- 安装依赖
- 声明产物出口'output'
- 执行'npx webpack'
HMR
模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：
- 保留在完全重新加载页面时丢失的应用程序状态。
- 只更新变更内容，以节省宝贵的开发时间。
- 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
Tree-Shaking
tree shaking是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如import和export。这个术语和概念实际上是兴起于 ES2015 模块打包工具rollup。
本文内容来源于概念 | webpack 中文网 (webpackjs.com)、模块热替换(hot module replacement) | webpack 中文网 (webpackjs.com)、什么是 Babel？ · Babel 中文文档 (docschina.org)和今日课程《Webpack知识体系》
