webpack5的变化
webpack5 :
这个版本的重点在于以下几点。
- 尝试用持久性缓存来提高内置性能。
- 尝试用更好的算法和最小值来改进长期缓存。
- 尝试用更好的Tree Shaking和代码生成来改善包大小。
- 尝试改善与网络平台的兼容性。
- 尝试在不约会任何破坏性变化的情况下，清理那些在实现v4功能时处于奇怪状态的内部结构。
- 尝试通过现在约会突破性的变化来为未来的功能做准备，使其能够重新连续地保持在v5版本上。
一、webpack 5 的介绍及下载
webpack 5 通过持久缓存提高构建性能。
webpack 5 使用更好的算法和默认值来改善长期缓存。
webpack 5 通过更好的树摇和代码生成来改善捆绑包大小。
webpack 5 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改。
webpack 5 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5。
webpack 5 的下载可以通过 npm i webpack@next webpack-cli -D 命令进行下载。
重大变更：功能清除
清理弃用的能力
所有在v4中被废弃的能力都被删除。
迁移：确保您的webpack 4构建没有打印废弃警告。
以下是一些被移除但在v4中没有废弃警告的东西：
- IgnorePlugin和BannerPlugin现在必须只传递一个参数，这个参数可以是对象，字符串或函数。
废弃代码
新的弃用包括一个弃用代码，这样他们更容易被引用。
语法废弃
require.include已被废弃，使用时默认会发出警告。
可以通过Rule.parser.requireInclude将行为改造允许，废弃或替代。
不再为Node.js模块自动引用
在早期，webpack的目的是为了让大多数的Node.js模块运行在浏览器中，但如今模块的布局已经发生了变化，现在很多模块主要是为前端而编写。webpack <= 4的版本中提供了很多Node.js核心模块的polyfill，一旦有人模块引用了任何一个核心模块（如cypto模块），webpack就会自动引用这些polyfill。
尽管这会有助于使用为Node.js编写模块变得容易，但它在建造时给bundle附加了庞大的polyfill。在大部分情况下，这些polyfill不一定。
从webpack 5开始不再自动填充这些polyfills，而会专注于前端模块兼容。我们的目标是提高web平台的兼容性。
迁移：
- 尽量使用前端兼容的模块。
- 可以手动为Node.js核心模块添加polyfill。错误提示会告诉你如何实现。
- 包作者：在
package.json中添加browser前缀，使包与前端兼容。为浏览器提供其他的实现/依赖项。
重大变更：长期缓存
确定的Chunk，模块ID和衍生名称
新增了长期缓存的算法。这些算法在生产模式下是替代启用的。
chunkIds: "deterministic" moduleIds: "deterministic" mangleExports: "deterministic"
该算法机理性的方式为模块和分块分配短的（3或5位）数字ID，这是包大小和长期缓存之间的一种权衡。
moduleIds/chunkIds/mangleExports: false请注意，在webpack 4中，moduleIds/chunkIds: false如果没有自定义插件，则可以正常运行，而在webpack 5中，您必须提供一个自定义插件。
迁移：最好使用chunkIds，moduleIds状语从句：mangleExports的默认值你也。可以选择使用旧的默认值。chunkIds: "size"，moduleIds: "size", mangleExports: "size"，这将会生成更小的包，但为了缓存，会更频繁地将其失效。
注意：在webpack 4中，散列的模块id会导致gzip性能降低。这与模块顺序的改变有关，已经被修正。
注意：在webpack 5中，deterministicIds在生产模式下是替代启用的。
真正的内容哈希
当使用[contenthash]时，Webpack 5将使用真正的文件内容哈希值。之前它“只”使用内部结构的哈希值。当只有注释被修改或变量被重命名时，这对长期缓存会有积极影响。这些变化在压缩后是不可见的。
重大变更：开发支持
命名代码块
在开发模式下，默认启用的新命名代码块ID算法为模块（和文件名）提供了人类的名字。模块ID由其路径决定，相对于context。代码块ID由代码块的内容决定。
所以你不再需要使用import(/* webpackChunkName: "name" */ "module")来调试。
可以在生产环境中使用chunkIds: "named"在生产环境中使用，但要确保不要不小心暴露模块名的敏感信息。
迁移：如果你不喜欢在开发中改变文件名，你可以通过chunkIds: "natural"来使用旧的数字模式。
模块联邦
Webpack 5增加了一个新的功能“模块联邦”，它允许多个webpack构建一起工作。从运行时的角度来看，多个集成的模块将表现得像一个巨大的连接模块图。从开发者的角度来看，模块可以从指定的远程内置中引入，并以最小的限制来使用。
重大变更：支持崭新的Web平台特性
JSON模块
从严格的ECMAScript模块导入时，JSON模块不再有命名的导出。
迁移：使用替换导出。
即使使用替换生成，未使用的属性optimization.usedExports也会被优化，属性会被optimization.mangleExports优化打乱。
可以在Rule.parser.parse中指定一个自定义的JSON解析器来引入类似JSON的文件（例如针对toml，yaml，json5等）。
import.meta
import.meta.webpackHot是module.hot的别名，在严格的ESM中也可以使用。import.meta.webpack是webpack的主要版本号。import.meta.url是当前文件的file:url（而非__filename，但作为文件url）。
资源模块
Webpack 5现在已经对表示资源的模块提供了内置支持。这些模块可以向输出文件夹发送一个文件，或者向javascript包注入一个DataURI。
它们可以通过多种方式被使用：
import url from "./image.png"和在module.rule中设置type: "asset"当匹配这样的引入时。（老方法）new URL("./image.png", import.meta.url)（新方式）
选择“新的方式”语法是为了允许在没有打包工具的情况下运行代码。这种语法也可以在浏览器中的原生ECMAScript模块中使用。
原生工人支持
当把资源的new URL和new Worker/ / new SharedWorker/navigator.serviceWorker.register结合起来时，webpack会自动为web worker创建一个新的入口点（entrypoint）。
new Worker(new URL("./worker.js", import.meta.url))
选择这种语法也是为了允许在没有打包工具的情况下运行代码。这种语法在浏览器的原生ECMAScript模块中也可以使用。
URIs
Webpack 5支持在请求中处理协议。
- 支持
data:。支持Base64或原始编码。Mimetype可以在module.rule中被映射到加载器和模块类型。例如：import x from "data:text/javascript,export default 42"。 - 支持
file:。 - 支持
http(s):，但需要通过new webpack.experiments.s schemesHttp(s)UriPlugin()选择加入。- 默认情况下，当目标为“ web”时，这些URI会导致对外部资源的请求（它们是外部资源）。
支持请求中的片段。例如：./file.js#fragment。
初步模块
Webpack 5支持所谓的“异步模块”。这些模块并非同步解析的，或者基于异步和Promise的。
通过“ import”导入它们会被自动处理，不需要额外的语法，而且几乎看不到区别。
通过require()引入它们会返回一个解析到衍生的Promise。
在webpack中，有多种方式来拥有异步模块。
- 初步的外部资源（异步外部）
- 新规范中的WebAssembly模块
- 使用顶层Await的ECMAScript模块。
外部资源
Webpack 5增加了更多的外部类型来覆盖更多的应用：
promise：一个评估为Promise的表达式。外部模块是一个初始化模块，解析值作为模块转换使用。
import。原生的import()用于加载指定的请求，外部模块是一个初始化模块，解析值作为模块转换。外部模块是一个初始化模块。
module：尚未实现，但计划通过import x from "..."加载模块。
script：通过