webpack相关概念：
| 术语 | 含义 |
|---|---|
| asset | 用于图片、字体、媒体，还有一些其他类型的文件；这些文件通常最终在输出(output ) 中成为单个文件；或使用style-loader 等进行内联 |
| bundle | 由多个module组成，“index.bundle.js” |
| bundles | 早已经过加载和编译的最终源文件版本 |
| Chunk | undle由chunk 组成，chunk 包括入口chunk与子chunk， chunk 会对应输出的bundle，但通过配置，也可不一一对应 |
| entry | 是构建依赖图的开始，想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，则传入数组； Key称为 entryChunkName, 常见 - app:表示应用程序。- vendor: 表示第三方库 只有一个应用程序入口起点（不包括vendor）的适合于 SPA应用。在多页应用中，使用多个应用程序入口起点。 |
| output | 入口可以指定多个，但是出口只能指定一个 |
| module | 离散功能块，更好的抽象与封装 |
| plugins | 在webpack 编译时使用，类似于事件绑定;包括：打包优化、资源管理和注入环境变量 |
| loader | 在加载文件前，预先处理文件，类似于任务处理器;(webpack 自身只支持 JavaScript，而 loader 能够让 webpack 处理那些非 JavaScript 文件，并且先将它们转换为有效 模块，然后添加到依赖图中。) |
| runtime | 在浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。 |
| manifest | 当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点，通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块。 |
总结webpack 运行过程如下：
image.png
Webpack 运行机制中的运行机制：
webpack 运行机制.jpg
资料：
一：是什么
webpack 是一个模块打包器(module bundler)， 而不是执行器(task runner)，任务执行器就是用来自动化处理常见的开发任务，例如项目的检查(lint)、构建(build)、测试(test)。相对于打包器(bundler)，任务执行器则聚焦在偏重上层的问题上面。你可以得益于，使用上层的工具，而将打包部分的问题留给 webpack。
打包器(bundler)帮助你取得准备用于部署的 JavaScript 和样式表，将它们转换为适合浏览器的可用格式。例如，JavaScript 可以压缩、拆分 chunk 和懒加载，以提高性能。
虽然有一些功能重复，但如果以正确的方式处理，任务运行器和模块打包器能够一起协同工作。
webpack 这样的工具，将动态打包(dynamically bundle)所有依赖项（创建所谓的依赖图(dependency graph)），这使得在每个模块都可以_明确表述它自身的依赖，我们将避免打包未使用的模块。
- 使用webpack，需要浏览器支持Promise（需要使用polyfill）。
** - ** 多数浏览器已支持import ， webpack 也对import 进行转译
二： assset management 资源管理
| 资源 | 对应loader |
|---|---|
| css | Css-loader style-loader |
| css 中的图片 | css-loader |
| css 中的自定义字体 | file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。 |
| Js中图片 | file-loader |
| JSON | 内置 |
| XML | xml-loader |
| CSV | Css-loader |
开启css modules:
{
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
}
三:管理输出
“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
| plugin | 作用 |
|---|---|
| html-webpack-plugin | 默认生成 index.html 文件 , 根据entry 与output将文件插入在index.html 中 |
| clean-webpack-plugin | 在每次构建前清理 /dist 文件 |
| UglifyJSPlugin | 压缩，打开sourceMap |
| ExtractTextPlugin | 分离CSS 和JS |
四： 开发
Source map ： 将编译后的代码映射回原始源代码，
source maps，需要配置devtool
自动编译改动文件： 3种方式
-
观察模式 ： "watch": "webpack --watch",
需要手动刷新浏览器 -
webpack-dev-server. : 指定文件/dist
在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。 -
webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求 运行一个简单的开发服务器(development server)
publicPath ： 设置的访问静态文件的路径 /a/index.html
五： HMR （模块热替换）
模块热替换(HMR - Hot Module Replacement)功能一个修改、添加或删除模块(modules)的过程，而正在运行中的应用程序无需重载加载整个页面。只适合在开发时使用。
1. new webpack.HotModuleReplacementPlugin() 是webpack 内置的功能
直接启用 hot: true 即可以使用， 但是会出现很多问题。
六： tree shaking
tree shaking 用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export
将文件标记为无副作用(side-effect-free)
在package.json 中 标记"sideEffects": false
mode: "production”， 配置选项轻松切换到压缩输出， 来启用 UglifyJSPlugin 插件
七： 开发环境的构建
将公共设置提出使用webpack-merge 库
修改npm script - - config
指定环境—使用webpack 中内置的DefinePlugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
八： 代码分离
-
入口起点：使用 entry 配置手动地分离代码。（重复打包）
-
防止重复：使用 SplitChunks 去重和分离 chunk。
-
动态导入：通过模块的内联函数调用来分离代码。
推荐使用import() 语法。import(/* webpackChunkName: "lodash" */ 'lodash')
bundle 分析 ，webpack 提供了官方分析工具，还有社区支持的工具，用以检测bundle所占空间等；
output.chunkFilename，它决定非入口 chunk 的名称
九： 懒加载
在用户交互时进行懒加载， 实际是采用import() 的动态导入的方式实现
button.onclick = e => **import**(/* webpackChunkName: "print" */ './print').then(module => {
var print = module.default;
print();
});
十：缓存
只要 /dist 目录中的内容部署到服务器上，客户端（通常是浏览器）就能够访问网站此服务器的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用缓存 技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。
通过必要的配置，以确保 webpack 编译生成的文件能够被客户端缓存，而在文件内容变化后，能够请求到新的文件。
部署一致性(deploying consistent)和资源可缓存(cachable assets)方面
-
output.filename 进行文件名替换，可以确保浏览器获取到修改后的文件， [hash] 替换可以用于在文件名中包含一个构建相关(build-specific)的 hash，但是更好的方式是使用 [chunkhash] 替换，在文件名中包含一个 chunk 相关(chunk-specific)的哈希。
这种情况，不更改文件，重新构建，hash 仍会变化， 是由于某些样板代码的原因 -
提取模板(Extracting Boilerplate) 创建单个运行时的bundle
通过 optimization.splitChunks 添加如下 cacheGroups 参数，将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中
这种情况，当只有src中文件发生变化时，重新构建，发现vendor 文件也发生变化
-
2的情况通过webpack.HashedModuleIdsPlugin 进行解决
十三：渐进式网络应用程序（PWA）
渐进式网络应用程序(Progressive Web Application - PWA)，是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的网络技术来实现的
通过使用workbox-webpack-plugin 插件
十四： 使用环境变量
使用env 可进行环境变量的配置，但必须将 module.exports 转换成一个函数
十九： 公共路径
为项目中的所有资源指定一个基础路径，成为公共路径（publicPath）。
网友评论