1、 Webpack简介

• 何为Webpack

• 使用 Webpack 的意义

• 如何开始一个 Webpack 工程
  1、Webpack 是一个开源的 JavaScript 模块打包工具，其最核心的功能是解决模块依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并成1个/多个 JS 文件。
  2、随着技术发展，JS 承担的功能多了代码也增多。产生一些不好维护的地方：

  • 需要手动维护 JS 的加载顺序。多个 script 之间通常会有隐式依赖关系，页面多的时候容易出问题

  • 每一个 script 标签都意味着需要向服务器请求一次静态资源，过多请求会拖慢网页渲染速度

  • 每个 script 标签中，顶层作用域即全局作用域，如果没有任何处理而直接在代码中进行变量或函数声明，就会全局污染

    而模块化解决了上述问题。

  • 通过导入和导出语句可以清晰看到模块间的依赖关系

  • 模块可以借助工具来进行打包，页面中只需要加载合并后的资源文件，减少网络开销

  • 多个模块之间的作用域是隔离的，不会有命名冲突

3、安装和打包
它唯一的依赖就是 Nodejs，推荐使用 Nodejs 的LTS （Long TermSupport，长期维护）

• 全局安装，与他人进行项目协作的时候，由于每个人系统中的 Webpack 版本不同，可能导致输出结果不一致，跟项目的也容易混淆。
• 推荐项目本地安装 Webpack
• npm init / yarn init 生成基本信息，文件目录中生成一个 package.json 文件，相当于 npm 项目的说明书，记录项目名称、版本、仓库地址等信息。
• npm install webpack webpack-cli--save-dev webpack 是核心模块，webpack-cli 是命令行工具
• 安装结束后，在命令行执行 npx webpack -v 以及 npx webpack-cli -v, 可以显示版本号，证明安装成功。
• npx webpack --entry=./index.js --output-filename=bundle.js --mode=development 当脚本参数过多时，我们需要将其转化为 webpack.config.js，用文件的方式维护复杂的 Webpack 配置。
• 编辑package.json文件： 可以直接执行 npm run build

2、模块打包

• 不同模块的标准以及它们之间的区别
• 如何编写模块
• 模块打包的原理
  1、CommonJS 和 ES6 Module 是目前使用较为广泛的模块标准。
  主要区别：
  • 在于前者建立模块依赖关系是在运行时，后者是在编译时；
  • 在模块导入方面，CommonJS 导入的是值拷贝，ES6 Module 导入的是只读的变量映射；
  • ES6 Module 通过其静态特性可以进行编译过程中的优化，并具备处理循环依赖的能力

3、资源输入输出

配置项 context、entry、output。
context相当于路径前缀，
entry是入口文件路径，

资源包放到本地调试，可以用 相对路径安装。
不需要替换依赖包，依赖包更改，项目使用的时候就会变。

npm install <path-to-loader>/force-strict-loader

在 webpack 工程目录下使用相对路径安装，会在项目的 node_modules 中创建一个指向实际 force-strict-loader 目录的软链，也就是说之后我们可以随时修改 loader 源码并不需要重复安装了。

module: {
	rules:[
		{
			test: '/\.js$/',
			use: 'force-strict-loader'
		}
	]
}

4、预处理器

loader 就像 Webpack 的翻译官。Webpack 本身只能接收 JavaScript，为了能够处理其他类型的资源，必须使用 loader 将资源转译为能够理解的形式。
配置 loader 时，实际上定义的是模块规则（module.rules）,它主要关注两件事：
该规则对哪些模块生效（test、exclude、include配置），使用哪些loader（use配置）
loader 可以是链式的，并且每一个都允许拥有自己的配置项。
loader本质上是一个函数。第一个loader的输入是源文件，之后所有loader的输入是上一个 loader 的输出，最后一个 loader 则直接输出给 Webpack。

5、样式处理

通过 SCSS、Less等预编译样式语言来提升开发效率，降低代码复杂度。通过 PostCSS 包含的很多功能强大的插件，可以让我们使用更新的 CSS 特性，保证更好的浏览器兼容性。通过 CSS Modules 可以让 CSS 模块化，避免样式冲突。

6、代码分片

合理地规划入口，使用 Commons-ChunkPlugin 或 SplitChunks，以及资源异步加载。借助这些方法我们可以有效的缩小资源体积，同时更好地利用缓存，给用户更友好的体验。

7、生产环境配置

开发环境中我们可能关注的是打包速度，而在生产环境中我们关注的则是输出的资源体积以及如何优化客户端缓存来缩短页面渲染时间。我们介绍了设置生产环境变量、压缩代码、监控资源体积等方法。缓存的控制主要依赖于从 chunk 内容生成 hash 作为版本号，并添加到资源文件名中，使资源更新后可以立即被客户端获取到。
source map 对于追溯线上问题十分重要，但也存在安全性隐患。通过一些特殊的 source map 配置以及第三方服务，我们可以兼顾两者。
Webpack 4 提供了 “mode: ‘production’” 配置项，通过它可以节省很多生产环境下的特定代码，让配置文件更加简洁。

8、打包优化

当我们发现性能的问题时，还是要根据现有情况分析出瓶颈在哪里，然后对症下药。

9、开发环境调优

本章介绍了一些 Webpack 周边插件，以及如何使用 HMR。这几年 Webpack 社区一直非常活跃，里面有很多有意思的小工具，感兴趣的读者可以选择一些去读源码，甚至改造，对了解 Webpack 本身也会有所帮助。
模块热更新-HMR原理
webpack本身并不支持HMR，所以要确保项目是基于 webpack-dev-server 或者 webpack-dev-middle 进行开发的。
在本地开发环境下，浏览器是客户端， webpack-dev-server （WDS）相当于是我们的服务器。HMR 的核心就是客户端从服务端拉取更新后的资源（准确的说，HMR 拉取的不是整个资源文件，而是 chunk diff，即 chunk 需要更新的部分）

10、更多JavaScript打包工具

Rollup 更加专注于 JavaScript 的打包，它自身附加的代码更少，具备 tree shaking，且可以输出多种形式的模块。
Parcel 在资源处理流程上做了改进，以追求更快的打包速度。同时其零配置的特性可以减少很多项目开发中花费在环境搭建上面的成本。

Webpack 优点：

1. Webpack 默认支持多种模块标准，包括 AMD、CommonJS，以及最新的 ES6 模块，而其他工具大多只能支持一到两种。
2. Webpack 有完备的代码分割（code splitting）解决方案。它可以分割打包后的资源，首屏只加载必要的部分，不太重要的功能放到后面动态加载。对于资源体积较大的应用来说很重要，可以有效减小资源体积，提升首页渲染速度。
3. Webpack 可以处理各种类型的资源，除了 JavaScript 还可以处理样式、模板、图片等。使用 loader 处理。
4. Webpack 拥有庞大的社区支持。