Webpack|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第10天
webpack简介
什么是webpack？
- 本质上是一种前端资源的编译，打包工具。它将根据模块的依赖关系，进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
- Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
使用webpack
核心流程（极简版）
-
入口处理‘entry’
从‘entry’文件开始，启动编译；流程
-
依赖解析‘require’‘import’
从entry文件开始，根据‘require’或‘import’等语句找到依赖资源
-
资源解析‘module’
根据‘module’配置，调用资源转移器，将png,css等非标准JS资源转译为JS内容
-
资源合并打包‘output’
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块化+一致性
- 多个文件资源合并成一个，减少 http 请求数
- 支持模块化开发
- 支持高级 JS 特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc...
使用方法
-
关于 Wabpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个 or 若干个环节。直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
四个核心
入口（entry）
- 入口起点(entry point)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）ree依赖的。
输出（output）
- output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为
./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
loader
- loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
插件(plugins)
- 插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口的功能极其强大，可以用来处理各种各样的任务。
工具线
模块热替换（HMR）
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：
- 保留在完全重新加载页面时丢失的应用程序状态。
- 只更新变更内容，以节省宝贵的开发时间。
- 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
树摇（Tree-Shaking）
-
作用：用于删除Dead Code（模块导出了，但未被其他模块使用）
-
什么是Dead Code？
- 代码没有被用到，不可达到
- 代码的执行结果不会被用到
- 代码只读不写
- ...
-
开启Tree-Shaking
- mode:production
- optimization.uesExports:ture
