webpack 單獨打包指定JS文件的方法
背景
最近接到一個需求，因為不確定打出的前端包所訪問的后端IP，需要對項目中IP配置文件單獨拿出來，方便運維部署的時候?qū)P做修改。因此，需要用webpack單獨打包指定文件。
CommonsChunkPlugin
module.exports = {
entry: {
app: APP_FILE // 入口文件
},
output: {
publicPath: './dist/', //輸出目錄，index.html尋找資源的地址
path: BUILD_PATH, // 打包目錄
filename: '[name].[chunkhash].js', // 輸出文件名
chunkFilename: '[name].[chunkhash].js' // commonChunk 輸出文件
}
}
題外話
{
先說一下publicPath ， 這邊有一個注意的點，即路徑寫成 ./dist 相對路徑。如果寫成/dist/這種絕對路徑，有一個弊端是當(dāng)nginx把前端的包沒有放在根目錄的情況下，index.html會訪問資源失敗。因此推薦寫成相對路徑，但是當(dāng)使用相對路徑時，有會存在一個潛在的問題，即項目本身的路由訪問如果是HTML5模式，而不是使用hash時（路由上有一個#號），那么項目一樣會部署失敗。angular，react都會有這樣的問題，vue沒用過，應(yīng)該類似。此時的解決辦法是，在index.html的head中添加base標簽，即：
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <base href="/" rel="external nofollow" > </head>
}
webpack本身基于模塊化，因此大多數(shù)情況下，我們僅需要一個入口文件就可以搞定。而針對本次需求，需要在app，這個入口之外再添加一個入口文件。即：
entry: {
app: APP_FILE // 入口文件
ip: IP_FILE
},
僅這樣對webpack配置之后，dist文件會成功打出app.xxx.js及ip.xxx.js，但是打包出的項目還是會報錯，解決辦法是：維持IP的入口文件不變，但是把它當(dāng)作commonChunk來處理。即在plugins中加入：
new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),
這樣保證優(yōu)先加載ip.xxx.js，避免報錯。
缺點：這樣打包有一個很明顯的缺點，即是打包出的文件是壓縮的，不方便對文件進行二次修改。（沒有找到解決壓縮的辦法）
CopyWebpackPlugin
最終解決辦法，還是通過讓ip.js這個文件脫離項目的模塊化，然后在index.html中單獨引用。（這是最開始就想到的解決辦法，但并不是自己想要的解決方案，但無奈認知有限，沒有解決掉之前的問題）。
解決流程：
首先在webpack引入CopyWebpackPlugin, 配置代碼：
new CopyWebpackPlugin([
{from: './src/config/ip.js', to: 'ip.js'},
])
在index.html中單獨引入script標簽，注意要配置一個隨機后綴，即：
<script>
document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>
防止ip.js因為緩存導(dǎo)致問題。
以上，就解決了webpack單獨打包指定js的問題。
ps：希望有更好的方法來分享給我。
這篇webpack 單獨打包指定JS文件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript的DOM與BOM的區(qū)別與用法詳解
這篇文章主要為大家詳細介紹了JavaScript的DOM與BOM的區(qū)別與用法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
在Javascript中為String對象添加trim,ltrim,rtrim方法
利用Javascript中每個對象(Object)的prototype屬性我們可以為Javascript中的內(nèi)置對象添加我們自己的方法和屬性。2006-09-09
微信小程序下拉刷新組件加載圖片(三個小點)不顯示刷新狀態(tài)的問題
很多朋友跟小編反饋這樣一個問題，微信小程序中列表頁面下拉刷新 ，頂部不顯示三個小點的刷新狀態(tài)，今天通過本文給大家介紹下小程序下拉刷新不了的解決方法，感興趣的朋友跟隨小編一起看看吧2022-10-10
使用JS location實現(xiàn)搜索框歷史記錄功能
這篇文章主要介紹了使用JS location實現(xiàn)搜索框歷史記錄功能，本文通過實例 代碼講解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
我第一次聽說編碼原則中有“盡快失敗”這一條時，覺得很奇怪，為什么代碼要失?。繎?yīng)該成功才對呀。下面小編通過實例代碼給大家介紹js 盡快失敗的原則，一起看看吧2016-10-10
這篇文章主要介紹了JS獲取當(dāng)前時間戳方法解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
本篇文章主要介紹了通過JS來判斷頁面控件是否獲取焦點的方法。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
Javascript遞歸打印Document層次關(guān)系實例分析
這篇文章主要介紹了Javascript遞歸打印Document層次關(guān)系的方法,實例分析了javascript中Document的層次關(guān)系,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了用javascript實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
正如標題所示的獲取非最后一列td值并將title設(shè)為該值，下面使用jquery來簡單實現(xiàn)下，需要的朋友可以參考下2013-10-10