Webpack 5 新特性

Webpack 5202010月正式发布,更新的内容比较多。我们从头梳理下本次更新的核心内容。

文章目录

      • 一、构建优化
        • 1. `Tree Shaking` (删除无用代码)
        • 2. 合并模块 `concatenateModules`
        • 3. 副作用 `sideEffects`
        • 4. 嵌套的 `Nested tree-shaking`
        • 5. 内部模块 `Inner-module tree-shaking`
      • 二、长期缓存
        • 1. `Hash` 相关:
        • 2. `deterministic` 长期缓存:
      • 三、增量构建
      • 四、`Web` 新特性
        • 1. 资源模块
        • 2. 不再为 `Node.js` 模块 自动引用 `Polyfills`
        • 3. 模块联邦
        • 4. 改进 `target` 配置
        • 5. 其他 ( 部分插件版本要求 )
      • 五、相关文章

一、构建优化

  • 1. Tree Shaking (删除无用代码)
    module.exports = { 
    	optimization: {
    		usedExports: true, // 标记出未被导出的变量
    		minimize: true // 去除无用变量并压缩代码
    	}
    }
    
  • 2. 合并模块 concatenateModules
    module.exports = { 
    	optimization: {
    		concatenateModules: true // 生产模式(production)下默认启用
    	}
    }
    
  • 3. 副作用 sideEffects

    webpack.config.js

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

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

    {
      "name": "webpack 5.0",
      "version": "1.0.0",
      "sideEffects": false
    }
    
  • 4. 嵌套的 Nested tree-shaking

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

  • 5. 内部模块 Inner-module tree-shaking
    module.exports = {
    	optimization: {
    		innerGraph: true // 分析导出和导入之间的依赖关系(生产模式默认启用),进行代码压缩
    	}
    }
    

二、长期缓存

  • 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)
    	}
    }
    

三、增量构建

  • 默认缓存到 node_modules/.cache/webpack 中,当前可以利用 cacheDirectory 自定义目录
    module.exports = {
    	cache: {
    		type: 'filesystem', // 将缓存类型设置为文件系统,`webpack 4.0` 为 `memory` (开发模式)
    		cacheDirectory: path.resolve(__dirname,'node_modules/.cac/webpack'), // 自定义缓存位置
    	}
    }
    

四、Web 新特性

  • 1. 资源模块

    webpack 4.0 中我们想对 pngmp3woff2 等资源进行处理时,需要利用 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
              }
            }
          },
     	]
     }
    

    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
    	        }
            }
          },
     	]
     }
    
  • 2. 不再为 Node.js 模块 自动引用 Polyfills

    不在为例如:pathprocessos 等类似依赖提供支持,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')
          ...
        }
      }
    }
    
  • 3. 模块联邦

    不同项目共享模块

  • 4. 改进 target 配置
    module.exports = {
      target: ['web', 'es5'] // Webpack将为网络平台生成一个运行代码,并且只使用ES5的功能
    }
    
  • 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加载资源

你可能感兴趣的:(Webpack,webpack,前端,javascript)