程式碼分離

程式碼分離方法有三種：

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

到此這篇關於webpack4從0搭建元件庫的實現的文章就介紹到這了,更多相關webpack4搭建元件庫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！