構(gòu)建接入 Webpack 打包優(yōu)化)
前端開(kāi)發(fā)工具前端構(gòu)建【免費(fèi)下載鏈接】snowpackESM-powered frontend build tool. Instant, lightweight, unbundled development. ??項(xiàng)目地址https://gitcode.com/gh_mirrors/sn/snowpack點(diǎn)擊查看免費(fèi)下載本文聚焦于 Snowpack 官方生產(chǎn)構(gòu)建優(yōu)化插件snowpack/plugin-webpack。在snowpack build默認(rèn)產(chǎn)出無(wú)打包unbundledESM 資源的基礎(chǔ)上該插件會(huì)在構(gòu)建管線的優(yōu)化階段接管產(chǎn)物交由 Webpack 完成代碼分割、tree-shaking、壓縮與 legacy 瀏覽器轉(zhuǎn)譯并自動(dòng)重寫 HTML 引用。讀完本文你將掌握該插件的安裝配置、全部選項(xiàng)的語(yǔ)義與默認(rèn)值、如何通過(guò)extendConfig深度定制 Webpack 配置以及其底層工作流程和源碼實(shí)現(xiàn)依據(jù)。插件定位Snowpack 構(gòu)建管線中的優(yōu)化環(huán)節(jié)Snowpack 的核心設(shè)計(jì)是無(wú)打包開(kāi)發(fā)開(kāi)發(fā)階段按需提供單個(gè) ESM 文件snowpack build產(chǎn)出的也是原生 ESM、CSS、HTML 文件。這種產(chǎn)物對(duì)小型站點(diǎn)足夠但許多團(tuán)隊(duì)希望在生產(chǎn)環(huán)境進(jìn)一步打包優(yōu)化見(jiàn) optimize-and-bundle 指南。Snowpack 的優(yōu)化分為兩種形態(tài)內(nèi)置的 esbuild 優(yōu)化管線以及通過(guò)插件接入 Webpack、Rollup 等打包器。snowpack/plugin-webpack正是官方推薦的 Webpack 優(yōu)化插件——在 esbuild 內(nèi)置優(yōu)化尚未成熟時(shí)官方文檔明確建議優(yōu)先使用該插件。從構(gòu)建流程源碼可以清楚看到它的掛載點(diǎn)snowpack/src/build/process.ts 中的optimize()會(huì)先運(yùn)行內(nèi)置 esbuild 優(yōu)化再調(diào)用runPipelineOptimizeStep遍歷所有注冊(cè)了optimize鉤子的插件snowpack/src/build/build-pipeline.ts 中該步驟會(huì)以{buildDirectory, log}為參數(shù)調(diào)用每個(gè)插件的optimize()任何異常都會(huì)導(dǎo)致構(gòu)建以process.exit(1)終止。也就是說(shuō)snowpack/plugin-webpack實(shí)現(xiàn)的核心就是一個(gè)optimize鉤子對(duì)應(yīng) snowpack/src/types.ts 中定義的PluginOptimizeOptions。安裝與基礎(chǔ)配置安裝插件npm install --save-dev snowpack/plugin-webpack然后將插件加入snowpack.config.mjs注意當(dāng)前倉(cāng)庫(kù)的官方文檔已統(tǒng)一推薦.mjs配置文件格式// snowpack.config.mjs export default { plugins: [ [ snowpack/plugin-webpack, { /* see Plugin Options below */ }, ], ], };一旦加入配置snowpack build時(shí)插件會(huì)自動(dòng)運(yùn)行無(wú)需額外命令。插件的工廠函數(shù)簽名在 plugin.js 中為function plugin(config, args {})其中config是 Snowpack 的完整配置對(duì)象args即上述數(shù)組第二項(xiàng)傳入的插件選項(xiàng)對(duì)象。插件選項(xiàng)詳解snowpack/plugin-webpack支持以下選項(xiàng)它們的解析邏輯集中在 plugin.js選項(xiàng)類型默認(rèn)值說(shuō)明sourceMapboolean未開(kāi)啟在打包產(chǎn)物中啟用 sourcemap對(duì)應(yīng) Webpack 的devtool: source-mapplugin.jsoutputPattern{css: string, js: string, assets: string}見(jiàn)下文最終打包文件的 URL 與磁盤輸出位置合法取值參照 Webpack 的output.filenameextendConfigfunction \| object恒等函數(shù)擴(kuò)展默認(rèn) Webpack 配置manifestboolean \| stringfalse是否生成 manifest 文件htmlMinifierOptionsboolean \| object一組默認(rèn)壓縮規(guī)則控制構(gòu)建后 HTML 的壓縮行為failOnWarningsbooleanfalseWebpack 產(chǎn)生警告時(shí)是否讓構(gòu)建失敗outputPattern控制產(chǎn)物文件命名與目錄outputPattern三個(gè)子項(xiàng)的默認(rèn)值在 plugin.js 中定義args.outputPattern args.outputPattern || {}; const jsOutputPattern args.outputPattern.js || js/[name].[contenthash].js; const cssOutputPattern args.outputPattern.css || css/[name].[contenthash].css; const assetsOutputPattern args.outputPattern.assets || assets/[name].[contenthash][ext];即默認(rèn)分別輸出到build/js/、build/css/、build/assets/目錄并自動(dòng)附加內(nèi)容哈希contenthash。插件還會(huì)做嚴(yán)格校驗(yàn)JS 模式必須以.js結(jié)尾、CSS 模式必須以.css結(jié)尾否則直接拋出Error(Output Pattern for JS must end in .js)/Error(Output Pattern for CSS must end in .css)。測(cè)試用例 plugin.test.js 展示了自定義outputPattern.js的寫法如[name]-[id].js。manifest生成資源清單manifest選項(xiàng)的解析邏輯見(jiàn) plugin.js傳字符串時(shí)直接將其作為清單文件名如./asset-manifest.json傳true時(shí)使用默認(rèn)文件名./asset-manifest.json傳false默認(rèn)或undefined時(shí)不生成 manifest。注意相對(duì)路徑是**相對(duì)于輸出目錄即build/**解析的。manifest 由webpack-manifest-plugin生成便于你在部署階段程序化地引用帶哈希的產(chǎn)物文件名。failOnWarnings把警告升級(jí)為失敗默認(rèn)情況下Webpack 編譯產(chǎn)生 warning 時(shí)插件只打印警告信息并繼續(xù)。若設(shè)置failOnWarnings: true則任何警告都會(huì)讓構(gòu)建直接失敗。對(duì)應(yīng)實(shí)現(xiàn)見(jiàn) plugin.jsstats.hasWarnings()時(shí)會(huì)先打印全部警告隨后根據(jù)該選項(xiàng)決定resolve(stats)還是reject。htmlMinifierOptions 與 extendConfightmlMinifierOptions和extendConfig屬于較復(fù)雜的選項(xiàng)下文單獨(dú)展開(kāi)。通過(guò) extendConfig 擴(kuò)展默認(rèn) Webpack 配置extendConfig讓你修改、擴(kuò)展插件內(nèi)置的默認(rèn) Webpack 配置——添加插件、配置 loader、調(diào)整output、改變optimization等。插件會(huì)把它的返回值直接交給webpack.compile()。// snowpack.config.mjs export default { plugins: [ [ snowpack/plugin-webpack, { extendConfig: (config) { config.plugins.push(/* ... */); return config; }, }, ], ], };從源碼看extendConfig有兩種形態(tài)plugin.js函數(shù)接收默認(rèn) Webpack 配置對(duì)象返回修改后的配置對(duì)象會(huì)被淺合并進(jìn)默認(rèn)配置等價(jià)于(cfg) ({...cfg, ...args.extendConfig})。擴(kuò)展后的配置同樣控制 HTML 的輸出位置emitHTMLFiles使用extendedConfig.output.path作為 HTML 寫入目錄plugin.js。測(cè)試用例 plugin.test.js 驗(yàn)證了這一點(diǎn)——將output.path改為dist/后打包產(chǎn)物與 HTML 都輸出到dist/而默認(rèn)的js/、css/、assets/目錄不再存在。HTML 壓縮htmlMinifierOptions構(gòu)建完成后插件會(huì)用html-minifier壓縮所有 HTML 文件。htmlMinifierOptions可以設(shè)為false完全禁用壓縮設(shè)為true或?qū)ο笫褂媚愕淖远x選項(xiàng)完整選項(xiàng)參考 html-minifier 的 Options Quick Reference。禁用示例// snowpack.config.mjs export default { plugins: [ [ snowpack/plugin-webpack, { htmlMinifierOptions: false, // disabled entirely, }, ], ], };默認(rèn)壓縮選項(xiàng)定義在 plugin.js合并邏輯為默認(rèn)選項(xiàng) 用戶自定義項(xiàng)Object.assign({}, defaults, args.htmlMinifierOptions){ collapseWhitespace: true, removeComments: true, removeEmptyAttributes: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, }底層實(shí)現(xiàn)剖析插件完整工作流程插件核心邏輯全部位于optimize({buildDirectory, log})中plugin.js整體分四步第一步解析 HTML確定打包入口parseHTMLFilesplugin.js掃描buildDirectory/**/*.html使用jsdom解析每個(gè) HTML找出所有滿足條件的script作為 Webpack 入口type為moduletypemodulesrc不是外部 URL不以協(xié)議://開(kāi)頭。入口的命名使用目錄 文件名組合如index與admin/index避免同名文件沖突。如果整個(gè)構(gòu)建目錄中找不到任何符合條件的 script 標(biāo)簽插件會(huì)直接拋出Error(Cant bundle without script tag in html)。第二步組裝默認(rèn) Webpack 配置并編譯插件為每個(gè)入口構(gòu)建 Webpack 配置plugin.js其中值得注意的默認(rèn)行為包括路徑別名/_snowpack、/__snowpack__、/web_modules分別映射到構(gòu)建目錄下的實(shí)際目錄兼容 Snowpack 生成的特殊資源路徑JS 轉(zhuǎn)譯鏈babel-loader禁用項(xiàng)目自身 Babel 配置configFile: false, babelrc: falsecompact: truebabel/preset-env目標(biāo)瀏覽器從項(xiàng)目的package.json中的browserslist字段讀取沒(méi)有配置時(shí)回退到0.75%, not ie 11, not UCAndroid 0, not OperaMini all見(jiàn) plugin.js。預(yù)設(shè)開(kāi)啟useBuiltIns: usage與corejs: 3按需注入 polyfill兩個(gè)內(nèi)置 loaderimport-meta-fix.jsplugins/import-meta-fix.js把import.meta重寫為基于__webpack_public_path__和window.location計(jì)算出的絕對(duì) URL并注入__SNOWPACK_ENV__proxy-import-resolve.jsplugins/proxy-import-resolve.js把*.proxy.js導(dǎo)入還原為原始擴(kuò)展名CSS 處理普通 CSS 走mini-css-extract-plugin提取為獨(dú)立文件.module.css額外開(kāi)啟css-loader的modules: true靜態(tài)資源其余文件圖片、字體、SVG 等統(tǒng)一走 Webpack 5 的asset/resource輸出文件名遵循assetsOutputPattern代碼分割splitChunks采用 granular chunking包含四個(gè)緩存組lib/_snowpack/pkg/下超過(guò) 100KB 的第三方庫(kù)單獨(dú)成塊命名lib-*、commons多個(gè)入口共享的公共模塊、shared多 chunk 共享模塊以 sha1 哈希命名、styles所有 CSS 匯入單個(gè)styles塊避免懶加載組件樣式缺失運(yùn)行時(shí)與壓縮Webpack runtime 單獨(dú)提取為webpack-runtimechunkminimizer 在默認(rèn) terser 基礎(chǔ)上追加CssMinimizerPlugin壓縮 CSS。編譯結(jié)束后插件會(huì)檢查stats.hasErrors()與stats.hasWarnings()錯(cuò)誤與警告分別格式化打印在failOnWarnings開(kāi)啟時(shí)警告也會(huì)導(dǎo)致失敗。第三步重寫 HTML指向打包產(chǎn)物emitHTMLFilesplugin.js讀取編譯結(jié)果的entrypoints資產(chǎn)列表為每個(gè)入口對(duì)應(yīng)的原始script克隆一個(gè)新節(jié)點(diǎn)保留原有async、defer等屬性僅移除typemodule將其src指向打包后的 JS 文件并插入到原節(jié)點(diǎn)之前以維持腳本順序最后移除原節(jié)點(diǎn)將打包產(chǎn)出的 CSS 以link relstylesheet形式追加到head資源路徑根據(jù)baseUrl來(lái)自buildOptions.baseUrl默認(rèn)/見(jiàn) plugin.js拼接baseUrl含協(xié)議時(shí)用url.resolve否則用path.posix.join。第四步寫回并壓縮 HTML最后把修改后的 DOM 序列化按htmlMinifierOptions決定是否壓縮寫入extendedConfig.output.path默認(rèn)即buildDirectory并自動(dòng)創(chuàng)建缺失目錄。兩個(gè)強(qiáng)制性的構(gòu)建行為插件運(yùn)行時(shí)還會(huì)修改兩份 Snowpack 構(gòu)建配置plugin.jsconfig.buildOptions.minify false壓縮交給 Webpack 處理關(guān)閉 Snowpack 默認(rèn)壓縮器避免重復(fù)壓縮config.buildOptions.clean trueWebpack 為產(chǎn)物生成唯一哈希因此構(gòu)建前會(huì)清理舊產(chǎn)物防止過(guò)期文件殘留。測(cè)試驗(yàn)證與最小示例倉(cāng)庫(kù)自帶的測(cè)試 plugin.test.js 覆蓋了四種場(chǎng)景無(wú)任何選項(xiàng)的最小構(gòu)建對(duì)快照比對(duì)輸出文件全選項(xiàng)構(gòu)建sourceMap: true、自定義outputPattern.js、extendConfig、manifest: true、htmlMinifierOptions: true通過(guò)extendConfig修改output.path后 HTML 跟隨輸出到新目錄多個(gè)入口存在同名文件如index.html與admin/index.html都引用index.js時(shí)各自正確打包、互不串?dāng)_。測(cè)試夾具 test/stubs/minimal/index.html 展示了插件期望的 HTML 形態(tài)script typemodule srcindex.js async defer/scripttest/stubs/minimal/index.js 則同時(shí)導(dǎo)入了styles.css與backpack.svg用于驗(yàn)證 CSS 提取與資源文件處理路徑。常見(jiàn)問(wèn)題與注意事項(xiàng)Cant bundle without script tag in html構(gòu)建產(chǎn)物中沒(méi)有任何script typemodule插件找不到入口。請(qǐng)確認(rèn) HTML 中使用了模塊腳本引用本地 JS。入口文件缺失腳本的src必須能對(duì)應(yīng)到build/目錄下真實(shí)存在的文件插件會(huì)直接把這些文件路徑作為 Webpackentry。自定義輸出目錄想改變產(chǎn)物輸出位置請(qǐng)通過(guò)extendConfig修改config.output.pathHTML 會(huì)跟隨到新目錄。文件名必須以正確擴(kuò)展名結(jié)尾outputPattern.js必須以.js結(jié)尾、outputPattern.css必須以.css結(jié)尾否則插件直接報(bào)錯(cuò)。目標(biāo)瀏覽器默認(rèn)轉(zhuǎn)譯目標(biāo)來(lái)自項(xiàng)目package.json的browserslist字段未配置時(shí)使用內(nèi)置回退值如需調(diào)整在package.json中維護(hù)browserslist即可。版本前提當(dāng)前倉(cāng)庫(kù)中該插件版本為 3.0.0見(jiàn) package.json已升級(jí)至 Webpack 5見(jiàn) CHANGELOG.md且不再支持舊版args.mode選項(xiàng)——若傳入mode且非production會(huì)直接拋錯(cuò)。綜上snowpack/plugin-webpack在保留 Snowpack 開(kāi)發(fā)體驗(yàn)的同時(shí)把生產(chǎn)打包環(huán)節(jié)無(wú)縫交給 Webpack 5從 HTML 中自動(dòng)發(fā)現(xiàn)入口、執(zhí)行 Babel 轉(zhuǎn)譯與按需 polyfill、按粒度拆分代碼塊、重寫 HTML 引用并壓縮輸出全程可由extendConfig深度定制是當(dāng)前 Snowpack 生產(chǎn)構(gòu)建優(yōu)化中功能最完整、最受官方推薦的打包方案。贊分享前端開(kāi)發(fā)工具前端構(gòu)建【免費(fèi)下載鏈接】snowpackESM-powered frontend build tool. Instant, lightweight, unbundled development. ??項(xiàng)目地址https://gitcode.com/gh_mirrors/sn/snowpack點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Snowpack 構(gòu)建流水線snowpack build 生產(chǎn)構(gòu)建與可選的打包Bundling策略Snowpack 構(gòu)建流水線snowpack build 生產(chǎn)構(gòu)建與可選的打包Bundling策略 snowpack build 是 Snowpack 將前端開(kāi)發(fā)工具前端構(gòu)建Fedora 40/41/42適用packettracer-fedora工具支持版本及安裝步驟全解析Fedora 40/41/42適用packettracer fedora工具支持版本及安裝步驟全解析 packettracer fedora是一款專為Fedo前端開(kāi)發(fā)工具前端構(gòu)建Open Notebook完整指南如何用開(kāi)源AI筆記本高效管理知識(shí)Open Notebook完整指南如何用開(kāi)源AI筆記本高效管理知識(shí) Open Notebook是一款開(kāi)源AI知識(shí)管理工具提供文檔上傳、AI對(duì)話、筆記生成和播人工智能AI 應(yīng)用RAG后端前端創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 使用 @snowpack/plugin-webpack 為 Snowpack 生產(chǎn)構(gòu)建接入 Webpack 打包優(yōu)化
前端開(kāi)發(fā)工具前端構(gòu)建【免費(fèi)下載鏈接】snowpackESM-powered frontend build tool. Instant, lightweight, unbundled development. ??項(xiàng)目地址https://gitcode.com/gh_mirrors/sn/snowpack點(diǎn)擊查看免費(fèi)下載本文聚焦于 Snowpack 官方生產(chǎn)構(gòu)建優(yōu)化插件snowpack/plugin-webpack。在snowpack build默認(rèn)產(chǎn)出無(wú)打包unbundledESM 資源的基礎(chǔ)上該插件會(huì)在構(gòu)建管線的優(yōu)化階段接管產(chǎn)物交由 Webpack 完成代碼分割、tree-shaking、壓縮與 legacy 瀏覽器轉(zhuǎn)譯并自動(dòng)重寫 HTML 引用。讀完本文你將掌握該插件的安裝配置、全部選項(xiàng)的語(yǔ)義與默認(rèn)值、如何通過(guò)extendConfig深度定制 Webpack 配置以及其底層工作流程和源碼實(shí)現(xiàn)依據(jù)。插件定位Snowpack 構(gòu)建管線中的優(yōu)化環(huán)節(jié)Snowpack 的核心設(shè)計(jì)是無(wú)打包開(kāi)發(fā)開(kāi)發(fā)階段按需提供單個(gè) ESM 文件snowpack build產(chǎn)出的也是原生 ESM、CSS、HTML 文件。這種產(chǎn)物對(duì)小型站點(diǎn)足夠但許多團(tuán)隊(duì)希望在生產(chǎn)環(huán)境進(jìn)一步打包優(yōu)化見(jiàn) optimize-and-bundle 指南。Snowpack 的優(yōu)化分為兩種形態(tài)內(nèi)置的 esbuild 優(yōu)化管線以及通過(guò)插件接入 Webpack、Rollup 等打包器。snowpack/plugin-webpack正是官方推薦的 Webpack 優(yōu)化插件——在 esbuild 內(nèi)置優(yōu)化尚未成熟時(shí)官方文檔明確建議優(yōu)先使用該插件。從構(gòu)建流程源碼可以清楚看到它的掛載點(diǎn)snowpack/src/build/process.ts 中的optimize()會(huì)先運(yùn)行內(nèi)置 esbuild 優(yōu)化再調(diào)用runPipelineOptimizeStep遍歷所有注冊(cè)了optimize鉤子的插件snowpack/src/build/build-pipeline.ts 中該步驟會(huì)以{buildDirectory, log}為參數(shù)調(diào)用每個(gè)插件的optimize()任何異常都會(huì)導(dǎo)致構(gòu)建以process.exit(1)終止。也就是說(shuō)snowpack/plugin-webpack實(shí)現(xiàn)的核心就是一個(gè)optimize鉤子對(duì)應(yīng) snowpack/src/types.ts 中定義的PluginOptimizeOptions。安裝與基礎(chǔ)配置安裝插件npm install --save-dev snowpack/plugin-webpack然后將插件加入snowpack.config.mjs注意當(dāng)前倉(cāng)庫(kù)的官方文檔已統(tǒng)一推薦.mjs配置文件格式// snowpack.config.mjs export default { plugins: [ [ snowpack/plugin-webpack, { /* see Plugin Options below */ }, ], ], };一旦加入配置snowpack build時(shí)插件會(huì)自動(dòng)運(yùn)行無(wú)需額外命令。插件的工廠函數(shù)簽名在 plugin.js 中為function plugin(config, args {})其中config是 Snowpack 的完整配置對(duì)象args即上述數(shù)組第二項(xiàng)傳入的插件選項(xiàng)對(duì)象。插件選項(xiàng)詳解snowpack/plugin-webpack支持以下選項(xiàng)它們的解析邏輯集中在 plugin.js選項(xiàng)類型默認(rèn)值說(shuō)明sourceMapboolean未開(kāi)啟在打包產(chǎn)物中啟用 sourcemap對(duì)應(yīng) Webpack 的devtool: source-mapplugin.jsoutputPattern{css: string, js: string, assets: string}見(jiàn)下文最終打包文件的 URL 與磁盤輸出位置合法取值參照 Webpack 的output.filenameextendConfigfunction \| object恒等函數(shù)擴(kuò)展默認(rèn) Webpack 配置manifestboolean \| stringfalse是否生成 manifest 文件htmlMinifierOptionsboolean \| object一組默認(rèn)壓縮規(guī)則控制構(gòu)建后 HTML 的壓縮行為failOnWarningsbooleanfalseWebpack 產(chǎn)生警告時(shí)是否讓構(gòu)建失敗outputPattern控制產(chǎn)物文件命名與目錄outputPattern三個(gè)子項(xiàng)的默認(rèn)值在 plugin.js 中定義args.outputPattern args.outputPattern || {}; const jsOutputPattern args.outputPattern.js || js/[name].[contenthash].js; const cssOutputPattern args.outputPattern.css || css/[name].[contenthash].css; const assetsOutputPattern args.outputPattern.assets || assets/[name].[contenthash][ext];即默認(rèn)分別輸出到build/js/、build/css/、build/assets/目錄并自動(dòng)附加內(nèi)容哈希contenthash。插件還會(huì)做嚴(yán)格校驗(yàn)JS 模式必須以.js結(jié)尾、CSS 模式必須以.css結(jié)尾否則直接拋出Error(Output Pattern for JS must end in .js)/Error(Output Pattern for CSS must end in .css)。測(cè)試用例 plugin.test.js 展示了自定義outputPattern.js的寫法如[name]-[id].js。manifest生成資源清單manifest選項(xiàng)的解析邏輯見(jiàn) plugin.js傳字符串時(shí)直接將其作為清單文件名如./asset-manifest.json傳true時(shí)使用默認(rèn)文件名./asset-manifest.json傳false默認(rèn)或undefined時(shí)不生成 manifest。注意相對(duì)路徑是**相對(duì)于輸出目錄即build/**解析的。manifest 由webpack-manifest-plugin生成便于你在部署階段程序化地引用帶哈希的產(chǎn)物文件名。failOnWarnings把警告升級(jí)為失敗默認(rèn)情況下Webpack 編譯產(chǎn)生 warning 時(shí)插件只打印警告信息并繼續(xù)。若設(shè)置failOnWarnings: true則任何警告都會(huì)讓構(gòu)建直接失敗。對(duì)應(yīng)實(shí)現(xiàn)見(jiàn) plugin.jsstats.hasWarnings()時(shí)會(huì)先打印全部警告隨后根據(jù)該選項(xiàng)決定resolve(stats)還是reject。htmlMinifierOptions 與 extendConfightmlMinifierOptions和extendConfig屬于較復(fù)雜的選項(xiàng)下文單獨(dú)展開(kāi)。通過(guò) extendConfig 擴(kuò)展默認(rèn) Webpack 配置extendConfig讓你修改、擴(kuò)展插件內(nèi)置的默認(rèn) Webpack 配置——添加插件、配置 loader、調(diào)整output、改變optimization等。插件會(huì)把它的返回值直接交給webpack.compile()。// snowpack.config.mjs export default { plugins: [ [ snowpack/plugin-webpack, { extendConfig: (config) { config.plugins.push(/* ... */); return config; }, }, ], ], };從源碼看extendConfig有兩種形態(tài)plugin.js函數(shù)接收默認(rèn) Webpack 配置對(duì)象返回修改后的配置對(duì)象會(huì)被淺合并進(jìn)默認(rèn)配置等價(jià)于(cfg) ({...cfg, ...args.extendConfig})。擴(kuò)展后的配置同樣控制 HTML 的輸出位置emitHTMLFiles使用extendedConfig.output.path作為 HTML 寫入目錄plugin.js。測(cè)試用例 plugin.test.js 驗(yàn)證了這一點(diǎn)——將output.path改為dist/后打包產(chǎn)物與 HTML 都輸出到dist/而默認(rèn)的js/、css/、assets/目錄不再存在。HTML 壓縮htmlMinifierOptions構(gòu)建完成后插件會(huì)用html-minifier壓縮所有 HTML 文件。htmlMinifierOptions可以設(shè)為false完全禁用壓縮設(shè)為true或?qū)ο笫褂媚愕淖远x選項(xiàng)完整選項(xiàng)參考 html-minifier 的 Options Quick Reference。禁用示例// snowpack.config.mjs export default { plugins: [ [ snowpack/plugin-webpack, { htmlMinifierOptions: false, // disabled entirely, }, ], ], };默認(rèn)壓縮選項(xiàng)定義在 plugin.js合并邏輯為默認(rèn)選項(xiàng) 用戶自定義項(xiàng)Object.assign({}, defaults, args.htmlMinifierOptions){ collapseWhitespace: true, removeComments: true, removeEmptyAttributes: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, }底層實(shí)現(xiàn)剖析插件完整工作流程插件核心邏輯全部位于optimize({buildDirectory, log})中plugin.js整體分四步第一步解析 HTML確定打包入口parseHTMLFilesplugin.js掃描buildDirectory/**/*.html使用jsdom解析每個(gè) HTML找出所有滿足條件的script作為 Webpack 入口type為moduletypemodulesrc不是外部 URL不以協(xié)議://開(kāi)頭。入口的命名使用目錄 文件名組合如index與admin/index避免同名文件沖突。如果整個(gè)構(gòu)建目錄中找不到任何符合條件的 script 標(biāo)簽插件會(huì)直接拋出Error(Cant bundle without script tag in html)。第二步組裝默認(rèn) Webpack 配置并編譯插件為每個(gè)入口構(gòu)建 Webpack 配置plugin.js其中值得注意的默認(rèn)行為包括路徑別名/_snowpack、/__snowpack__、/web_modules分別映射到構(gòu)建目錄下的實(shí)際目錄兼容 Snowpack 生成的特殊資源路徑JS 轉(zhuǎn)譯鏈babel-loader禁用項(xiàng)目自身 Babel 配置configFile: false, babelrc: falsecompact: truebabel/preset-env目標(biāo)瀏覽器從項(xiàng)目的package.json中的browserslist字段讀取沒(méi)有配置時(shí)回退到0.75%, not ie 11, not UCAndroid 0, not OperaMini all見(jiàn) plugin.js。預(yù)設(shè)開(kāi)啟useBuiltIns: usage與corejs: 3按需注入 polyfill兩個(gè)內(nèi)置 loaderimport-meta-fix.jsplugins/import-meta-fix.js把import.meta重寫為基于__webpack_public_path__和window.location計(jì)算出的絕對(duì) URL并注入__SNOWPACK_ENV__proxy-import-resolve.jsplugins/proxy-import-resolve.js把*.proxy.js導(dǎo)入還原為原始擴(kuò)展名CSS 處理普通 CSS 走mini-css-extract-plugin提取為獨(dú)立文件.module.css額外開(kāi)啟css-loader的modules: true靜態(tài)資源其余文件圖片、字體、SVG 等統(tǒng)一走 Webpack 5 的asset/resource輸出文件名遵循assetsOutputPattern代碼分割splitChunks采用 granular chunking包含四個(gè)緩存組lib/_snowpack/pkg/下超過(guò) 100KB 的第三方庫(kù)單獨(dú)成塊命名lib-*、commons多個(gè)入口共享的公共模塊、shared多 chunk 共享模塊以 sha1 哈希命名、styles所有 CSS 匯入單個(gè)styles塊避免懶加載組件樣式缺失運(yùn)行時(shí)與壓縮Webpack runtime 單獨(dú)提取為webpack-runtimechunkminimizer 在默認(rèn) terser 基礎(chǔ)上追加CssMinimizerPlugin壓縮 CSS。編譯結(jié)束后插件會(huì)檢查stats.hasErrors()與stats.hasWarnings()錯(cuò)誤與警告分別格式化打印在failOnWarnings開(kāi)啟時(shí)警告也會(huì)導(dǎo)致失敗。第三步重寫 HTML指向打包產(chǎn)物emitHTMLFilesplugin.js讀取編譯結(jié)果的entrypoints資產(chǎn)列表為每個(gè)入口對(duì)應(yīng)的原始script克隆一個(gè)新節(jié)點(diǎn)保留原有async、defer等屬性僅移除typemodule將其src指向打包后的 JS 文件并插入到原節(jié)點(diǎn)之前以維持腳本順序最后移除原節(jié)點(diǎn)將打包產(chǎn)出的 CSS 以link relstylesheet形式追加到head資源路徑根據(jù)baseUrl來(lái)自buildOptions.baseUrl默認(rèn)/見(jiàn) plugin.js拼接baseUrl含協(xié)議時(shí)用url.resolve否則用path.posix.join。第四步寫回并壓縮 HTML最后把修改后的 DOM 序列化按htmlMinifierOptions決定是否壓縮寫入extendedConfig.output.path默認(rèn)即buildDirectory并自動(dòng)創(chuàng)建缺失目錄。兩個(gè)強(qiáng)制性的構(gòu)建行為插件運(yùn)行時(shí)還會(huì)修改兩份 Snowpack 構(gòu)建配置plugin.jsconfig.buildOptions.minify false壓縮交給 Webpack 處理關(guān)閉 Snowpack 默認(rèn)壓縮器避免重復(fù)壓縮config.buildOptions.clean trueWebpack 為產(chǎn)物生成唯一哈希因此構(gòu)建前會(huì)清理舊產(chǎn)物防止過(guò)期文件殘留。測(cè)試驗(yàn)證與最小示例倉(cāng)庫(kù)自帶的測(cè)試 plugin.test.js 覆蓋了四種場(chǎng)景無(wú)任何選項(xiàng)的最小構(gòu)建對(duì)快照比對(duì)輸出文件全選項(xiàng)構(gòu)建sourceMap: true、自定義outputPattern.js、extendConfig、manifest: true、htmlMinifierOptions: true通過(guò)extendConfig修改output.path后 HTML 跟隨輸出到新目錄多個(gè)入口存在同名文件如index.html與admin/index.html都引用index.js時(shí)各自正確打包、互不串?dāng)_。測(cè)試夾具 test/stubs/minimal/index.html 展示了插件期望的 HTML 形態(tài)script typemodule srcindex.js async defer/scripttest/stubs/minimal/index.js 則同時(shí)導(dǎo)入了styles.css與backpack.svg用于驗(yàn)證 CSS 提取與資源文件處理路徑。常見(jiàn)問(wèn)題與注意事項(xiàng)Cant bundle without script tag in html構(gòu)建產(chǎn)物中沒(méi)有任何script typemodule插件找不到入口。請(qǐng)確認(rèn) HTML 中使用了模塊腳本引用本地 JS。入口文件缺失腳本的src必須能對(duì)應(yīng)到build/目錄下真實(shí)存在的文件插件會(huì)直接把這些文件路徑作為 Webpackentry。自定義輸出目錄想改變產(chǎn)物輸出位置請(qǐng)通過(guò)extendConfig修改config.output.pathHTML 會(huì)跟隨到新目錄。文件名必須以正確擴(kuò)展名結(jié)尾outputPattern.js必須以.js結(jié)尾、outputPattern.css必須以.css結(jié)尾否則插件直接報(bào)錯(cuò)。目標(biāo)瀏覽器默認(rèn)轉(zhuǎn)譯目標(biāo)來(lái)自項(xiàng)目package.json的browserslist字段未配置時(shí)使用內(nèi)置回退值如需調(diào)整在package.json中維護(hù)browserslist即可。版本前提當(dāng)前倉(cāng)庫(kù)中該插件版本為 3.0.0見(jiàn) package.json已升級(jí)至 Webpack 5見(jiàn) CHANGELOG.md且不再支持舊版args.mode選項(xiàng)——若傳入mode且非production會(huì)直接拋錯(cuò)。綜上snowpack/plugin-webpack在保留 Snowpack 開(kāi)發(fā)體驗(yàn)的同時(shí)把生產(chǎn)打包環(huán)節(jié)無(wú)縫交給 Webpack 5從 HTML 中自動(dòng)發(fā)現(xiàn)入口、執(zhí)行 Babel 轉(zhuǎn)譯與按需 polyfill、按粒度拆分代碼塊、重寫 HTML 引用并壓縮輸出全程可由extendConfig深度定制是當(dāng)前 Snowpack 生產(chǎn)構(gòu)建優(yōu)化中功能最完整、最受官方推薦的打包方案。贊分享前端開(kāi)發(fā)工具前端構(gòu)建【免費(fèi)下載鏈接】snowpackESM-powered frontend build tool. Instant, lightweight, unbundled development. ??項(xiàng)目地址https://gitcode.com/gh_mirrors/sn/snowpack點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Snowpack 構(gòu)建流水線snowpack build 生產(chǎn)構(gòu)建與可選的打包Bundling策略Snowpack 構(gòu)建流水線snowpack build 生產(chǎn)構(gòu)建與可選的打包Bundling策略 snowpack build 是 Snowpack 將前端開(kāi)發(fā)工具前端構(gòu)建Fedora 40/41/42適用packettracer-fedora工具支持版本及安裝步驟全解析Fedora 40/41/42適用packettracer fedora工具支持版本及安裝步驟全解析 packettracer fedora是一款專為Fedo前端開(kāi)發(fā)工具前端構(gòu)建Open Notebook完整指南如何用開(kāi)源AI筆記本高效管理知識(shí)Open Notebook完整指南如何用開(kāi)源AI筆記本高效管理知識(shí) Open Notebook是一款開(kāi)源AI知識(shí)管理工具提供文檔上傳、AI對(duì)話、筆記生成和播人工智能AI 應(yīng)用RAG后端前端創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考