目录
- 开始使用
- 管理依赖
- 管理资源
- 样式
- 图片
- 字体
- 数据
- 管理输出
- 内容注入
- 清理目录
- 文件清单
- 代码分离
- 多个入口
- 提取模板
- 动态导入
- 公共类库
- 三方类库
- 异步类库
- 分析输出
- 管理缓存
- 文件指纹
- 内容摘要
- 提取样板
- 模块标识
- 模块刷新
- 开发环境
- 错误追踪
- 资源映射
- 自动编译
- 文件监控
- 自动刷新
- 产品环境
- 错误追踪
- 代码压缩
- 文件指纹
- 环境标识
- 公共路径
- 构建性能
开始使用
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev [email protected]
管理依赖
为什么要？
如果导入模块时requrie 含有表达式﴾expressions﴿，会创建一个上下文﴾context﴿，因为在编译时﴾compile time﴿并不清楚具体是哪一个模块被导入。这会导致所有可能用到的模块都包含在 bundle 中。
require("./template/" + name + ".ejs");
方法选择？
可以使用 require.context() 方法来创建自己的（模块）上下文。给这个方法传 3 个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，以及一个匹配文件的正则表达式。
require.context(directory, useSubdirectories = false, regExp = /^.//)
使用 require.context() 方法来创建自己的（模块）上下文，每个模块上下文有 3 个属性： resolve , keys , id 。 resolve 是一个函数，它返回请求被解析后得到的模块 id。 keys 也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。id 是上下文模块里面所包含的模块 id. 可能在你使用 module.hot.accept 的时候被用到。
如何进行？
准备收集需要创建的模块上下文
//inex.js
var cache = {};
function importAll(r) {
r.keys().forEach(key => cache[key] = r(key));
}
使用require.context()创建上下文
//index.js
importAll(require.context('../components/', true, /\.js$/));
// 在构建时，所有被 require 的模块都会被存到cache 里面。
管理资源
为什么要？
动态打包 (dynamically bundle)所有依赖项（创建所谓的依赖图﴾dependency graph﴿）。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，我们将避免打包未使用的模块。
可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起。会使代码更具备可移植性。
方法选择？
加载样式：style‐loader 、css‐loader
加载图片：file‐loader、url-loader
加载字体：file‐loader、url-loader
加载数据：file‐loader、csv‐ loader、xml‐loader
如何进行？
通过加载器在js模块引入非js文件。从 JavaScript 模块中 import一个 CSS 文件，使用style‐loader 和 css‐loader。在依赖于此样式的文件中 import './style.css'（声明依赖） 。现在，当该模块运行时，含有 CSS 字符串的