Webpack 5 新特性

Webpack 5 在2020年10月正式发布，更新的内容比较多。我们从头梳理下本次更新的核心内容。

一、构建优化

• 1. Tree Shaking （删除无用代码）

  module.exports = { 
  	optimization: {
  		usedExports: true, // 标记出未被导出的变量
  		minimize: true // 去除无用变量并压缩代码
  	}
  }
  1
  2
  3
  4
  5
  6

• 2. 合并模块 concatenateModules

  module.exports = { 
  	optimization: {
  		concatenateModules: true // 生产模式(production)下默认启用
  	}
  }
  1
  2
  3
  4
  5

• 3. 副作用 sideEffects

  webpack.config.js：

  module.exports = { 
  	optimization: {
  		sideEffects: true // 开启副作用功能(编译时跳过被导出但未被使用、标记为不包含副作用的模块)
  	}
  }
  1
  2
  3
  4
  5

  package.json：标记所有模块无副作用

  {
    "name": "webpack 5.0",
    "version": "1.0.0",
    "sideEffects": false
  }
  1
  2
  3
  4
  5

• 4. 嵌套的 Nested tree-shaking

  删除嵌套的模块未被使用的相关代码

• 5. 内部模块 Inner-module tree-shaking

  module.exports = {
  	optimization: {
  		innerGraph: true // 分析导出和导入之间的依赖关系(生产模式默认启用)，进行代码压缩
  	}
  }
  1
  2
  3
  4
  5

二、长期缓存

• 1. Hash 相关：

  • hash：所有的 chunk 文件使用相同的 hash ，项目中任一文件变化都会影响所有的 chunk 文件的 hash 值
  • chunkhash：针对与输出文件，任意文件改变只会影响其依赖的chunk ，不会影响其它chunk
  • contenthash：基于单个文件内容产生的 hash (webpack 4.0 之前只针对于文本结构)

• 2. deterministic 长期缓存：

  module.exports = {
  	optimization: {
  		chunkIds: "deterministic", // 告知 webpack 当选择模块 id 时需要使用哪种算法
  		moduleIds: "deterministic"， // 告知 webpack 当选择模块 id 时需要使用哪种算法
  		mangleExports: "deterministic" // 允许控制导出处理(export mangling)
  	}
  }
  1
  2
  3
  4
  5
  6
  7

三、增量构建

• 默认缓存到 node_modules/.cache/webpack 中，当前可以利用 cacheDirectory 自定义目录

  module.exports = {
  	cache: {
  		type: 'filesystem', // 将缓存类型设置为文件系统，`webpack 4.0` 为 `memory` （开发模式）
  		cacheDirectory: path.resolve(__dirname,'node_modules/.cac/webpack'), // 自定义缓存位置
  	}
  }
  1
  2
  3
  4
  5
  6

四、Web 新特性

• 1. 资源模块

  webpack 4.0 中我们想对 png、mp3、woff2 等资源进行处理时，需要利用 url-loader 来处理。在 webpack 5.0 中内置了对静态资源的处理，添加了 4种 新的模块类型，如下：

  模块类型	说明
  asset/source	导出资源的源代码。之前通过使用 raw-loader 实现
  asset/inline	导出一个资源的 Base64。之前通过使用 url-loader 实现
  asset/resource	发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现
  asset	在导出一个 Base64 和发送一个单独的文件之间自动选择，并且配置资源体积限制实现。之前通过使用 url-loader

  webpack 4.0：之前的配置

   module: {
   	rules: [
  	  // 处理图片资源
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: {
            loader: 'url-loader',
            options: {
              esModule: false, // 设为false，否则图片编译为 [object Module]
              limit: 10 * 1024 // 超过10k
              name: 'image/[name].[hash:7].[ext]',
              // outputPath: 'image'
              publicPath: _publicPath
            }
          }
        },
   	]
   }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

  webpack 5.0：现在的配置

   module: {
   	rules: [
  	  // 处理图片资源
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          type: 'asset'，
      	generator: {
      		filename: 'image/[name].[hash:7].[ext]'
          },
          parser: {
  	        dataUrlCondition: {
  	           maxSize: 10 * 1024 // 超过10kb
  	        }
          }
        },
   	]
   }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

• 2. 不再为 Node.js 模块 自动引用 Polyfills

  不在为例如：path，process，os 等类似依赖提供支持，Polyfill 交由开发者自由控制

  module.exports = {
    resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        events: require.resolve('events'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        path: require.resolve('path-browserify'),
        process: require.resolve('process/browser')
        ...
      }
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

• 3. 模块联邦

  不同项目共享模块

• 4. 改进 target 配置

  module.exports = {
    target: ['web', 'es5'] // Webpack将为网络平台生成一个运行代码,并且只使用ES5的功能
  }
  1
  2
  3

• 5. 其他 ( 部分插件版本要求 )

  • webpack-dev-server：v4.0.0 +
  • html-webpack-plugin：v5.0.0 +
  • …

五、相关文章

• Webpack 各版本 ( v1 - v4 ) 的区别

• Webpack 4.X + React + Node + Mongodb 从零搭建聊天室(二)

• Webpack 4.X 从零配置SPA单页应用

• Webpack 4.X 配置cdn加载资源