webpack5带来的变更

webpack5带来的变更

默认值

在webpack5中，以下内容变成了默认值，不想改可以不写

entry: './src/index.js',
output: {
   filename: '[name].js',
   path: path.resolve(__dirname, 'dist'),
}

devServer 的变化

启动 devServe 的方式由 webpack-dev-server 变为 webpack serve

注意！ webpack serve 内部还是需要 webpack-dev-server这个包，所以还需要安装。

SplitChunk

webpack4

optimization: {
    splitChunks: {
      minSize: 30000,
    },
  },

webpack5

指定不同类型的大小，分割chunk可以更加精确

optimization: {
    splitChunks: {
      minSize: {
        javascript: 30000,
        webassembly: 50000,
      },
    },
  },

Caching

持久缓存，性能优化的重大变更之一。之前，要在babel或terser里面配置缓存，现在直接在caching进行配置。打包缓存，下次打包更快。

module.exports = {
  cache: {
    // 1. 将缓存类型设置为文件系统
    type: 'filesystem',

    buildDependencies: {
      // 2. 将你的 config 添加为 buildDependency，以便在改变 config 时获得缓存无效
      // 当配置修改时，缓存失效
      config: [__filename],

      // 3. 如果你有其他的东西被构建依赖，你可以在这里添加它们
      // 注意，webpack、加载器和所有从你的配置中引用的模块都会被自动添加
    },
  },
};

type: 'filesystem'磁盘存储 | 'memory'内存存储

缓存再webpack5中默认开启，缓存默认是在内存里，但可以对 cache 进行设置。
执行 webpack 命令时，webpack 追踪了每个模块的依赖，并创建了文件系统快照。此快照会与真实文件系统进行比较，当检测到差异时，将触发对应模块的重新构建

**注意！**如果使用这个，就不要用cnpm来安装模块，会出问题。

chunk ID

基本概念

module，每个文件可以看成一个module
chunk，webpack打包最终生成的代码块，代码块会生成文件，一个文件对应一个chunk
在webpack5之前， 没有从entry打包的chunk文件，都会以1，2，3…的文件命名方式输出，删除某些文件可能会导致缓存失效。

选项

可选值	含义	示例
natural	按使用顺序的数字ID	1、2、3…
named	方便调试，可读	one.js
deteministic	根据模块名称生成简短的 hash 值	829
size	根据模块大小生成的数字id	0

不管设置成什么，chunk内容更改，chunkhash还是会改变的。

在生产模式下，默认启动这些功能 ：
chunkIds: “deteministic”，moduleIds: “deteministic”
这种方式，会生成长度为3或5位数字的hash值给 modules 和 chunks

如果不喜欢在开发中改变文件名，你可以通过 chunkIds: “natural” 来使用旧的数字模式。

资源模块

webpack 5 处理资源文件时，可不使用 raw-loader、file-loader 以及 url-loader 等 loader 处理，可直接使用全新的资源模块（Asset Modules）。
raw-loader => asset/source 导出资源的源代码
file-loader => asset/resource 发送一个单独的文件并导出URL
url-loader => asset/inline 导出一个资源的导出 URI

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // 新方式
      },
    ],
  },
};

关于更多资源模块内容可以看 官方文档

tree shaking

传送门，webpack5-tree shaking 体验

module federation

传送门，webpack5模块联邦体验和解析