webpack多入口打包示例代碼
更新時(shí)間：2023年12月27日 10:20:39 作者：海上彼尚
這篇文章主要介紹了webpack多入口打包的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
webpack多入口打包
首先得確定用webpack構(gòu)建的應(yīng)用，再然后后就是確定目錄。
這兩個(gè)js文件分別對應(yīng)兩個(gè)html文件，在 html中需要分別引入對應(yīng)的js文件。處理html中引入的問題可以使用 html-webpack-plugin 這個(gè)插件。
配置：
module.exports = {
entry: {
index: path.resolve(__dirname, "./src/index.js"),
map: path.resolve(__dirname, "./src/map.js"),
},
plugins: {
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/index.html"),
filename: "index.html",
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/map.html"),
filename: "map.html",
}),
}
}webpack：打包示例-打包多入口
入口
entry: {
// 前臺(tái)
index: './public/assets/js/index', //打包入口項(xiàng)
list: './public/assets/js/list',
search: './public/assets/js/search',
detail: './public/assets/js/detail',
jquery: './public/assets/vendors/jquery/jquery.min.js',
// 后臺(tái)
},出口
output: {
path: path.join(__dirname, './dist'),
filename: '[name].bundle.js', //多入口寫法--打包出同名文件
},對應(yīng)的插件
plugins: [
//后臺(tái)
//前臺(tái)
new Webpack.ProvidePlugin({
$: 'jquery' //全局暴露的第三方庫 .不寫內(nèi)置模塊的話，報(bào)$ is not defined
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, './public/index.html'),
chunks: ['index'] //多入口寫法--按需導(dǎo)入
}),
new HtmlWebpackPlugin({
filename: 'list.html',
template: path.join(__dirname, './public/list.html'),
chunks: ['list']
}),
new HtmlWebpackPlugin({
filename: 'search.html',
template: path.join(__dirname, './public/search.html'),
chunks: ['search']
}),
new HtmlWebpackPlugin({
filename: 'detail.html',
template: path.join(__dirname, './public/detail.html'),
chunks: ['detail']
})
],完整截圖
到此這篇關(guān)于webpack多入口打包的文章就介紹到這了,更多相關(guān)webpack多入口打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
D3.js 實(shí)現(xiàn)帶伸縮時(shí)間軸拓?fù)鋱D的示例代碼
這篇文章主要介紹了D3.js 實(shí)現(xiàn)帶伸縮時(shí)間軸拓?fù)鋱D的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
TypeScript前端高頻面試題總結(jié)大全(2026最新版)
TypeScript作為JavaScript的超集,已經(jīng)成為前端開發(fā)中不可或缺的技術(shù),這篇文章主要介紹了TypeScript前端高頻面試題總結(jié)大全的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-05-05
JS/HTML5游戲常用算法之碰撞檢測 像素檢測算法實(shí)例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測 像素檢測算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript像素檢測碰撞算法的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
今天開發(fā)的時(shí)候，遇到要點(diǎn)擊縮略圖之后居中顯示圖片的大圖查看（大致效果如上圖所示）~想了好幾種實(shí)現(xiàn)方式,下面通過本文給大家分享JS點(diǎn)擊縮略圖整屏居中放大圖片效果，需要的朋友參考下吧2017-07-07
Javascript獲取與設(shè)置ckeditor數(shù)據(jù)的實(shí)現(xiàn)方法
最近編輯器后臺(tái)升級成了ckeditor,但原來后臺(tái)有很多對應(yīng)編輯器內(nèi)容的替換功能,那么就需要用js獲取ckeditor編輯器里面的內(nèi)容,這里就為大家介紹一下具體的實(shí)現(xiàn)方法2023-08-08
微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能
這篇文章主要介紹了微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
這篇文章主要是對JS畫線的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關(guān)資料,需要的朋友可以參考下2015-11-11
dist是distribution的縮寫,表示可以直接交付給用戶、部署到服務(wù)器、發(fā)布到倉庫的最終產(chǎn)物,這篇文章主要介紹了項(xiàng)目中dist到底是什么的相關(guān)資料,文中通過代碼介紹非常詳細(xì),需要的朋友可以參考下2026-05-05
原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02