在webpack中如何單獨打包指定JS文件
下面我就為大家分享一篇webpack 單獨打包指定JS檔案的方法，具有很好的參考價值，希望對大家有幫助。
背景
最近接到一個需求，因為不確定打出的前端套件所存取的後端IP，需要對專案中IP設定檔單獨拿出來，方便運維部署的時候對IP做修改。因此，需要用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/這種絕對路徑，有一個弊端是當nginx把前端的包沒有放在根目錄的情況下，index.html會存取資源失敗。因此推薦寫成相對路徑，但是當使用相對路徑時，有會存在一個潛在的問題，即項目本身的路由訪問如果是HTML5模式，而不是使用hash時（路由上有一個#號），那麼項目一樣會部署失敗。 angular，react都會有這樣的問題，vue沒用過，應該類似。此時的解決辦法是，在index.html的head中加入base標籤，即：
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <base href="/" rel="external nofollow" > </head>
entry: {
app: APP_FILE // 入口文件
ip: IP_FILE
},new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),CopyWebpackPlugin
最終解決方法，還是透過讓ip.js這個檔案脫離專案的模組化，然後在index.html中單獨引用。 （這是一開始就想到的解決辦法，但不是自己想要的解決方案，但無奈認知有限，沒有解決掉之前的問題）。 解決流程：首先在webpack引入CopyWebpackPlugin, 配置代碼：new CopyWebpackPlugin([
{from: './src/config/ip.js', to: 'ip.js'},
])<script>
document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>以上是在webpack中如何單獨打包指定JS文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
VUE3入門教學：使用Webpack進行打包和構建
Jun 15, 2023 pm 06:17 PM
Vue是一款優秀的JavaScript框架，它可以幫助我們快速建立互動性強、高效性好的Web應用程式。 Vue3是Vue的最新版本，它引入了許多新的功能和功能。 Webpack是目前最受歡迎的JavaScript模組打包器和建置工具之一，它可以幫助我們管理專案中的各種資源。本文就為大家介紹如何使用Webpack打包和建構Vue3應用程式。 1.安裝Webpack
vite和webpack的差別是什麼
Jan 11, 2023 pm 02:55 PM
差異：1、webpack伺服器啟動速度比vite慢；由於vite啟動的時候不需要打包，也就不需要分析模組依賴、編譯，所以啟動速度非常快。 2.vite熱更新比webpack快；vite在HRM方面，當某個模組內容改變時，就讓瀏覽器去重新請求該模組即可。 3.vite用esbuild預先建置依賴，而webpack基於node。 4.vite的生態不如webpack，載入器、插件不夠豐富。
如何使用PHP和webpack進行模組化開發
May 11, 2023 pm 03:52 PM
隨著Web開發技術的不斷發展，前後端分離、模組化開發已成為了廣泛的趨勢。 PHP作為一種常用的後端語言，在進行模組化開發時，我們需要使用一些工具來實現模組的管理和打包，其中webpack是一個非常好用的模組化打包工具。本文將介紹如何使用PHP和webpack進行模組化開發。一、什麼是模組化開發模組化開發是指將程式分解成不同的獨立模組，每個模組都有自己的作
webpack怎麼將es6轉成es5的模組
Oct 18, 2022 pm 03:48 PM
設定方法：1.用導入的方法把ES6程式碼放到打包的js程式碼檔案中；2、利用npm工具安裝babel-loader工具，語法「npm install -D babel-loader @babel/core @babel/preset- env」；3、建立babel工具的設定檔「.babelrc」並設定轉碼規則；4、在webpack.config.js檔案中設定打包規則即可。
使用Spring Boot和Webpack建構前端工程和插件系統
Jun 22, 2023 am 09:13 AM
隨著現代Web應用程式的複雜性不斷增加，建立優秀的前端工程和插件系統變得越來越重要。隨著SpringBoot和Webpack的流行，它們成為了一個建構前端工程和插件系統的完美組合。 SpringBoot是一個Java框架，它以最小的配置需求來建立Java應用程式。它提供了許多有用的功能，例如自動配置，使開發人員可以更快、更輕鬆地建立和部署Web應用程式。 W
Webpack是什麼？詳解它是如何運作的？
Oct 13, 2022 pm 07:36 PM
Webpack是一款模組打包工具。它為不同的依賴創建模組，將其整體打包成可管理的輸出檔案。這一點對於單頁面應用程式（現今Web應用的事實標準）來說特別有用。
vue webpack可打包哪些文件
Dec 20, 2022 pm 07:44 PM
在vue中，webpack可以將js、css、圖片、json等檔案打包為適當的格式，以供瀏覽器使用；在webpack中js、css、圖片、json等檔案類型都可以被當作模組來使用。 webpack中各種模組資源可打包合併成一個或多個包，並且在打包的過程中，可以對資源進行處理，如壓縮圖片、將scss轉成css、將ES6語法轉成ES5等可以被html識別的文件類型。
vue中的webpack用什麼安裝
Jul 25, 2022 pm 03:27 PM
vue中的webpack以node套件管理器「npm」或npm鏡像「cnpm」來安裝。 webpack是一個用於現代JavaScript應用程式的靜態模組打包工具，是基於node.js開發的，使用時需要有node.js元件支援；需要使用npm或cnpm進行安裝，語法「npm install webpack -g」或“cnpm install webpack -g”。
