實習隨筆 3 webpack多入口多出口打包

2021-10-25 09:25:42 字數 1360 閱讀 2245

通過webpack將專案的乙個檔案目錄下的js按照其父目錄進行區分打包

大概情況:

可以使用webpack多入口多出口來實現

技術難點1、獲取到pages下面的資料夾的js檔案

解決方法:引入node 的glob模組,這乙個模組可以幫我們獲取想要的js檔案

具體使用方法:參考

技術難點2、輸出到跟其父目錄同名的.js檔案

解決方法:webpack多入口多出口的配置

具體方法:參考

const fs =

require

('fs'),

path =

require

('path'

)const webpack =

require

('webpack'

)const glob=

require

('glob'

)// 獲取指定路徑下的入口檔案

function

getentries

(globpath)

console.

log(

getentries

('./shop/src/b2c-ads/resource/src/js/pages/**/*.js'))

;const config =

, output:

, performance:

}module.exports = config

執行打包命令後,大概是這個樣子

---------------------------------------------分割線-----------------------------------

附上修改的**:

entry:

, output:

,

打包後的結果:

---------------------------------------又是分割線----------------------------------

打包後的js檔案需要為main.js,這很容易操作

**附上:

entry:

,

打包後的結果:

webpack 多入口配置

順著官網的操作,我們可以本地測試起我們的專案 npm run dev,首先我們要理解webpack打包主要是針對js,檢視下面生成的配置,首頁是index.html,模版用的index.html,入口檔案用的mian.js file build webpack.base.conf.js entry ...

webpack 多入口打包分析

文章最後都是老夫精挑細選的乾貨哦 1 為什麼需要多入口打包?或者說什麼時候需要多入口打包?先從但入口打包說起,單入口也就是常見的單頁面應用,就是任何使用者想訪問我這個 必須且通過這乙個唯一的入口 比如我們開發了乙個 外賣 10.79.64.4 8080 index.html,主頁 有很多吃的種類,比...

webpack3 配置多入口和多出口

我們之前寫到的webpack.config.js,具體 如下 module.exports 上面的entry 和 output 就是單一的入口和出口。下面我們建立乙個多入口,多出口的例項。1.新建資料夾 page,並在該資料夾下面建立index.html和signup.html2個檔案 index....