您好,登錄后才能下訂單哦!
本篇文章為大家展示了怎么利用webpack4搭建一個(gè)組件庫(kù),內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
代碼分離
代碼分離方法有三種:
入口起點(diǎn):使用 entry 配置手動(dòng)地分離代碼。
防止重復(fù):使用 SplitChunksPlugin 去重和分離 chunk。
動(dòng)態(tài)導(dǎo)入:通過模塊中的內(nèi)聯(lián)函數(shù)調(diào)用來分離代碼。
動(dòng)態(tài)導(dǎo)入(dynamic imports)
import()
require.ensure
預(yù)取/預(yù)加載模塊(prefetch/preload module)
webpack v4.6.0+ 添加了預(yù)取和預(yù)加載的支持。
在聲明 import 時(shí),使用下面這些內(nèi)置指令,可以讓 webpack 輸出 "resource hint(資源提示)",來告知瀏覽器:
prefetch(預(yù)取):將來某些導(dǎo)航下可能需要的資源
preload(預(yù)加載):當(dāng)前導(dǎo)航下可能需要資源
配置項(xiàng)重點(diǎn)詳解
(1)mode: "pruduction"
啟用 minification(代碼壓縮) 和 tree shaking (usedExports:true)
自動(dòng)指定DefinePlugin:process.env.NODE_ENV === 'production'
(2)devtool
source map 簡(jiǎn)介
生產(chǎn)環(huán)境:source-map
開發(fā)環(huán)境:inline-source-map
(3)optimization
splitChunks
splitChunks: { chunks: 'all', // 提取公共模塊 loadash // 將第三方庫(kù)(library)(例如 lodash 或 react)提取到單獨(dú)的 vendor chunk 文件中,是比較推薦的做法 // 利用 client 的長(zhǎng)效緩存機(jī)制,命中緩存來消除請(qǐng)求,并減少向 server 獲取資源,同時(shí)還能保證 client 代碼和 server 代碼版本一致。 cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } },
runtimeChunk
runtimeChunk: 'single' // 提取引導(dǎo)模板 將 runtime 代碼拆分為一個(gè)單獨(dú)的 chunk
(5)output
// filename: '[name].[contenthash].js', // content hash 內(nèi)容變化才會(huì)變化 filename: 'webpack-numbers.js', path: path.resolve(__dirname, 'dist'), // 暴露 library 這是庫(kù)名稱 import from 'webpackNumbers' library: 'webpackNumbers', libraryTarget: 'umd'
(6)plugins
HashedModuleIdsPlugin
const { HashedModuleIdsPlugin } = require('webpack'); plugins: [ // 不會(huì)因模塊增加和減少導(dǎo)致的模塊內(nèi)容變化,增加長(zhǎng)緩存命中機(jī)制 new HashedModuleIdsPlugin() ],
BundleAnalyzerPlugin
分析打包代碼
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); plugins: [ new BundleAnalyzerPlugin() ]
上述內(nèi)容就是怎么利用webpack4搭建一個(gè)組件庫(kù),你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。