我們之前寫到的webpack.config.js,具體**如下:
module.exports =上面的entry 和 output 就是單一的入口和出口。}
下面我們建立乙個多入口,多出口的例項。
1.新建資料夾:page,並在該資料夾下面建立index.html和signup.html2個檔案
index.html**如下:
index.html 引用了base.js 和 index.js。js檔案我們等會建立。
signup.html**如下:
signup.html 引用了base.js 和 signup.js。
2.在src資料夾下面建立base.js, index.js, signup.js3個js 檔案:
base.js:
var open=trueindex.js:;export ;
import from './base';signup.js:if(open)
import from './base';從上面我們得知 index.html 頁面引用了base.js 和 index.js ,if(open)else
signup.html 引用了base.js 和 signup.js。
我們通過webpack如何分別打包js檔案呢?這裡我們通過 webpack 的多入口 和 多出口配置就能達到該目的了。
3. 配置多入口,多出口:
module.exports =,跟單入口,單出口的檔案相比,entry現在是乙個物件了,output 的 filename 多了乙個 [name].。output:
}
最後執行打包命令,可以看到 dist 目錄下面生成了 index.bundle.js 和 signup.bundle.js 。
所以這裡的[name] 等同於 entry 定義的鍵名。
執行結果如下:
檔案打包完成之後,記得把你html 引用的js 路徑改成你打包後的js路徑。如下圖:
index.html:
signup.html:
感謝閱讀~~
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,主頁 有很多吃的種類,比...
webpack的多入口多出口配置手記
webpack.prod.js檔案配置 let path require path let htmlwebpackplugin require html webpack plugin let require clean webpack plugin module.exports output plu...