tag webpack4

標籤
貢獻6
78
01:41 AM · Nov 04 ,2025
heiyanjing 頭像 birenyangguangcanlan 頭像 chendian_5b5997450ca5d 頭像 aconfuseboy 頭像 patelo 頭像 lllllxt 頭像

@webpack4 / 博客 RSS 訂閱

chendian_5b5997450ca5d 頭像

沉澱 - webpack 3x 到webpack 4x 踩坑記錄

從jspang的《Webpack3.X版 成神之路》webpack入門（http://jspang.com/posts/2017/...） 如今升級到4x，菜鳥獨自踩坑一把辛酸淚，webpack4主要教程參考https://blog.51cto.com/140471... 1.安裝webpack webpack 4x webpack和webpack-cli要分開安裝，不再一次安裝

webpack3 , webpack4

收藏 評論

birenyangguangcanlan 頭像

緣自世界 - webpack 構建多頁面應用——初探

如何使用webpack構建多頁面應用，這是一個我一直在想和解決的問題。網上也給出了很多的例子，很多想法。猛一看，覺得有那麼點兒意思，但仔細看也就那樣。 使用webpack這個構建工具，可以使我們少考慮很多的問題。 我們常見的單頁面應用只有一個頁面，它考慮問題，解決問題圍繞着中心化去解決，因此很多麻煩都迎刃而解。如果你使用過vue.js，那麼想必你一定用過vue-router，vuex，它們就是典型

webpack3 , webpack , webpack4

收藏 評論

birenyangguangcanlan 頭像

緣自世界 - 構建多頁面應用——單個頁面的處理

在看這篇文章之前，需要你對構建多頁面應用有一定的基礎認識，如果沒有的話，可以先參考這篇文章webpack 構建多頁面應用。 多頁面應用是由一個個獨立的頁面組成。因此，細粒度的處理一個個單頁面是構建單頁面框架之後的一個重要實現。 因為所涵蓋的知識點較碎，所以就不按照頁面的位置結合組成元素來講，如：head, body, script等。這裏主要介紹head。因為script操作其實就是上一篇文章中已

構建工具 , webpack3 , webpack , webpack4

收藏 評論

aconfuseboy 頭像

aConfuseBoy - webpack5多頁面腳手架

webpack5,webpack4,webpack3多頁面腳手架 移步webpack5多頁面腳手架 移步webpack4多頁面腳手架 移步webpack3多頁面腳手架 適用於多個靜態頁面的顯示, 如官網 項目地址: https://github.com/WangZhenHao/webpack-multiple-page 示例： 1.2.0 修改html-wbepack-plugin插件：添

webpack3 , 多頁面應用 , webpack5 , webpack4

收藏 評論

patelo 頭像

patelo - vue多項目多模塊運行/打包

vue多項目多模塊運行/打包 vue-cli4 為例，實現多項目的分模塊打包。多項目之間共享組件和依賴，運行、打包互不干擾。 一、安裝 npm install -g @vue/cli # OR yarn global add @vue/cli 二、創建項目： vue create my-project # OR vue ui 三、目錄改造 所謂分模塊打包，一個模塊就是一個獨立項目，各個模塊

vue.js , yarn , webpack4 , 前端 , Javascript

收藏 評論

heiyanjing 頭像

HeiYanjing - webpack簡單文件打包實例

依賴版本 "webpack": "^4.44.2", "webpack-cli": "^3.3.12" 一個簡單的文件通過webpack打包 // 導出 console.log('index.js') module.exports = '導出內容' // 導入 let log = require('./log.js') console.log('index.js內容') console.log(

webpack4

收藏 評論

heiyanjing 頭像

HeiYanjing - 根據webpack打包規則，實現簡單的打包手寫實現

首先導入導出分為幾類 CommonJS導入CommonJS EsModule導入CommonJS EsModule導入EsModule 根據實現規則，簡單代碼樣例 // index.js // import log,{age} from "./log.js" // // let log = require('./log.js') // console.log('index.js內容')

ecmascript-6 , commonjs , webpack4

收藏 評論

heiyanjing 頭像

HeiYanjing - webpack，單文件懶加載分析實現

log.js文件 module.exports ="lazy load logger" index.js文件 let oBtn = document.getElementById('btn') oBtn.addEventListener('click', function () { import( /*webpackChunkName: "log"*/ './log.js').then(

webpack4

收藏 評論

heiyanjing 頭像

HeiYanjing - webpack底層工具庫tapable基本使用

tapable工作流程 實例化hook註冊事件監聽 通過hook觸發事件監聽 執行懶編譯生成的可執行代碼 Hook本職是tapable實例對象,分同步和異步，異步分並行和串行兩種模式 Hook執行特點 Hook:普通鈎子，監聽器之間互相獨立不干擾 BailHook:熔斷鈎子，某個監聽返回非undefined時後續不執行 WaterfallHoook: 瀑布鈎子，上一個監

tapable , webpack4

收藏 評論

heiyanjing 頭像

HeiYanjing - 根據tapable調試結果，手寫SyncHook實現

調試過程瞭解SyncHook案例運行基本原理 let hook = new SyncHook(['name', 'age'])操作構建了一個SyncHook實例,掛載一些屬性核心屬性是_x和taps屬性,最後調用call方法 // SyncHook.js // 非tap模式全部拋出異常 tapAsync、 tapPromise const TAP_ASYNC = () = { thr

tapable , webpack4

收藏 評論

heiyanjing 頭像

HeiYanjing - 尋找webpack打包入口

node_modules下.bin目錄下有一個webpack.cmd腳本文件，組裝定位了要執行的webpack.js文件 "%~dp0\node.exe" "%~dp0\..\webpack\bin\webpack.js" %* 將啓動文件指向了webpack目錄下的bin\webpack.js。 在webpack.js文件中，有一個runCommond方法和isInstalled判斷包是否安裝

webpack4

收藏 評論

heiyanjing 頭像

HeiYanjing - 迷你版webpack實現

調試webpack過程瞭解執行流程 開始-合併配置------------實例化compile-------設置node文件讀寫能力-----通過循環掛載plugins-----處理webpack內部默認的插件（入口文件） 開始-compiler.beforeRun-compiler.run--------compiler.beforeCompile-compiler.compile----

webpack4

收藏 評論

heiyanjing 頭像

HeiYanjing - webpack4和webpack5打包資源文件配置差異

項目中會有一些資源文件，比如圖片資源，字體資源文件等。這些文件在打包的時候需要移動到dist目錄 webpack4中，打包這些資源文件，需要用到url-loader和file-loader, file-loader把文件輸出到一個文件夾中，在代碼中通過相對 URL 去引用輸出的文件 (處理圖片和字體) url-loader與 file-loader 類似，區別是用户可以設置一個閾

webpack5 , webpack4

收藏 評論

lllllxt 頭像

lllllxt_in_sf - vue2 多頁面構建後chunks無法注入script問題

概述 @vue/cli-service@4.x下，配置了多頁面，構建後因為chunks沒有注入到html中，導致訪問頁面時頁面空白 原因 自定義了splitChunks，且單個包的大小達到某些條件後，會分割為多個包，如index~123.111.js，index~123.222.js，其中index~123是 chunkName 而html-webpack-plugin@3.x中，是判斷 i

vue.js , vue-cli4 , 前端框架 , webpack4 , 前端

收藏 評論