webpack4從0搭建組件庫

代碼分離

代碼分離方法有三種：

• 入口起點：使用 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()
]