Webpack 5 new features

Webpack 5It was officially released in October 2020 and has a lot of updated content. Let’s sort out the core content of this update from the beginning.

1. Construction optimization

• 1. Tree Shaking(Remove useless code)

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

• 2. Merge modulesconcatenateModules

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

• 3. Side effectssideEffects

  webpack.config.js：

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

  package.json: Mark all modules without side effects

  {
        
        
    "name": "webpack 5.0",
    "version": "1.0.0",
    "sideEffects": false
  }
  

• 4. NestedNested tree-shaking

  Delete unused related code of nested modules

• 5. Internal modulesInner-module tree-shaking

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

2. Long-term caching

• 1.Related Hash:

  • hash: All chunkfiles use the same value hash. Any change in any file in the project will affect the value chunkof all files .hash
  • chunkhash: For output files, changes to any file will only affect its dependencies chunk, not otherchunk
  • contenthash: Generated based on the content of a single file hash( webpack 4.0previously only for text structure)

• 2. deterministicLong-term caching:

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

3. Incremental construction

• The default cache is node_modules/.cache/webpackin , and currently you can use cacheDirectorya custom directory

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

4. WebNew features

• 1. Resource module

  webpack 4.0When we want to process resources such as png, mp3, , etc., we need to use . The processing of static resources is built into , and 4 new module types are added , as follows:woff2url-loaderwebpack 5.0

  module type	illustrate
  asset/source	Export the source code of the resource. Previously raw-loaderachieved by using
  asset/inline	Export a resource Base64. Previously url-loaderachieved by using
  asset/resource	Send a separate file and export URL. Previously file-loaderachieved by using
  asset	Automatically choose between exporting a Base64single file and sending a separate file, and configure resource volume limits to achieve this. previously by usingurl-loader

  webpack 4.0:Previous configuration

   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
            }
          }
        },
   	]
   }
  

  webpack 5.0:Current configuration

   module: {
        
        
   	rules: [
  	  // 处理图片资源
        {
        
        
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          type: 'asset'，
      	generator: {
        
        
      		filename: 'image/[name].[hash:7].[ext]'
          },
          parser: {
        
        
  	        dataUrlCondition: {
        
        
  	           maxSize: 10 * 1024 // 超过10kb
  	        }
          }
        },
   	]
   }
  

• Node.js2. No longer automatically quoted for modulesPolyfills

  It no longer provides support for similar dependencies such as: path, process, osetc., Polyfillleaving it to developers to freely control

  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')
        ...
      }
    }
  }
  

• 3. Module federation

  Shared modules between different projects

• 4. Improve targetconfiguration

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

• 5. Others (some plug-in version requirements)

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

5. Related articles

• Differences between Webpack versions (v1 - v4)

• Webpack 4.X + React + Node + Mongodb Build a chat room from scratch (2)

• Webpack 4.X configure SPA single-page application from scratch

• Webpack 4.X configures cdn to load resources