乐趣区

关于webpack4:webpack4从0搭建组件库

jiezi

代码拆散

代码拆散办法有三种：

  • 入口终点：应用 entry 配置手动地拆散代码。
  • 避免反复：应用 SplitChunksPlugin 去重和拆散 chunk。
  • 动静导入：通过模块中的内联函数调用来拆散代码。

动静导入 (dynamic imports)

  • import()
  • require.ensure

预取 / 预加载模块 (prefetch/preload module)

webpack v4.6.0+ 增加了预取和预加载的反对。

在申明 import 时，应用上面这些内置指令，能够让 webpack 输入 “resource hint(资源提醒)”，来告知浏览器：

  • prefetch(预取)：未来某些导航下可能须要的资源
  • preload(预加载)：以后导航下可能须要资源

配置项重点详解

（1）mode: “pruduction”

  • 启用 minification(代码压缩) 和 tree shaking (usedExports:true)
  • 主动指定 DefinePlugin：process.env.NODE_ENV === ‘production’

（2）devtool

source map 简介

  • 生产环境：source-map
  • 开发环境：inline-source-map

（3）optimization

  • splitChunks
splitChunks: {
  chunks: 'all', // 提取公共模块 loadash
  // 将第三方库 (library)（例如 lodash 或 react）提取到独自的 vendor chunk 文件中，是比拟举荐的做法
  // 利用 client 的长效缓存机制，命中缓存来打消申请，并缩小向 server 获取资源，同时还能保障 client 代码和 server 代码版本统一。cacheGroups: {
    vendor: {test: /[\\/]node_modules[\\/]/,
      name: 'vendors',
      chunks: 'all'
    }
  }
},
  • runtimeChunk
runtimeChunk: 'single' // 提取疏导模板 将 runtime 代码拆分为一个独自的 chunk

（5）output

// filename: '[name].[contenthash].js', // content hash 内容变动才会变动
filename: 'webpack-numbers.js', 
path: path.resolve(__dirname, 'dist'),

// 裸露 library 这是库名称 import from 'webpackNumbers'
library: 'webpackNumbers', 
libraryTarget: 'umd'

（6）plugins

  • HashedModuleIdsPlugin
const {HashedModuleIdsPlugin} = require('webpack');

plugins: [
    // 不会因模块减少和缩小导致的模块内容变动，减少长缓存命中机制
    new HashedModuleIdsPlugin()],
  • BundleAnalyzerPlugin

剖析打包代码 

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

plugins: [new BundleAnalyzerPlugin()
]
退出移动版