webpack

1.webpack静态资源

放置在 （static）public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

在其内部，我们通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的文件路径，再用 url-loader 将小于 限制资源大小 的资源内联，以减少 HTTP 请求的数量。

URL 转换规则

• 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。

• 如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。

• 如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

• 如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @

• 在css中引入图片，要使用@别名的时候，要加~以区分，即~@

2.webpack构建流程

通过npm run xx 在pakage.json中找到对应的执行文件，执行入口文件，通过loader加载器加载打包webpack不能识别打包的其他文件，通过模块依赖分析，划分成不同的chunk，输出打包文件。

3.loader（加载器） 和plugin（插件）

loader是便于webpack打包不能识别的资源。plugin是扩展webpack的功能

4.webpack缓存

webpack的hash,chunkhash,contenthash

hash是跟整个webpack构建项目相关的，每次项目构建hash对应的值都是不同的，即使项目文件没有做“任何修改”。

chunkhash，从字面上就能猜出它是跟webpack打包的chunk相关的。具体来说webpack是根据入口entry配置文件来分析其依赖项并由此来构建该entry的chunk，并生成对应的hash值。不同的chunk会有不同的hash值。一般在项目中把公共的依赖库和程序入口文件隔离并进行单独打包构建，用chunkhash来生成hash值，只要依赖公共库不变，那么其对应的chunkhash就不会变，从而达到缓存的目的

contenthash表示由文件内容产生的hash值，内容不同产生的contenthash值也不一样。在项目中，通常做法是把项目中css都抽离出对应的css文件来加以引用

把公共的文件用CommonsChunkPlugin插件提取出来，输出文件带上chunkhash.分离css和jsextra-text-webpack-plugin,使用contenthash避免js更新，css为更改的时候，chunkhash值改变，达不到缓存效果。

转载于:https://www.cnblogs.com/sisi2020/p/10232225.html