您好,登錄后才能下訂單哦!
這篇“webpack打包時(shí)怎么修改文件名”文章的知識點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“webpack打包時(shí)怎么修改文件名”文章吧。
new CopyPlugin({ patterns: [ { from: "**/**.txt", to: "xx/xx.ext" }, ], })
在webpack中有一個(gè)output的配置項(xiàng),可以在這里配置js文件的文件路徑和文件名
修改入口文件的文件名通過配置output的filename屬性,可以動(dòng)態(tài)的改變?nèi)肟谖募奈募窂胶臀募?,通常的我們?huì)這樣設(shè)置filename: "[name].[chunkhash].js"
,而其中的name就是文件名修改的關(guān)鍵,這個(gè)name我們可以在entry入口中進(jìn)行定義
entry:{ index: path.resolve(__dirname, './src/index.js'), youindex: path.resolve(__dirname, './src/index.js') }
在entry中也可以配置某一個(gè)庫/組件的文件進(jìn)行打包
entry:{ ol: path.resolve(__dirname, './static/ol/ol_me.js'), }
filename除了可以設(shè)置類似占位符格式的字符串,還可以是一個(gè)函數(shù),函數(shù)第一個(gè)參數(shù)中包含了打包文件的一系列信息,根據(jù)這些信息,可以去自定義打包文件的輸出名稱
output:{ filename: (pathData) => { return pathData.chunk.name === 'main' ? utils.assetsPath('js/youfilename.js') : utils.assetsPath('js/[name].[chunkhash].js'); } }
filename占位符字符串對應(yīng)的結(jié)果可以由以下參數(shù)拼接或者返回
修改非入口(按需引入)文件的文件名通過配置output的chunkFilename 屬性,可以動(dòng)態(tài)的改變非入口文件的文件路徑和文件名,通常的我們會(huì)這樣設(shè)置chunkFilename: "[name].[chunkhash].js"
,而其中的name就是文件名修改的關(guān)鍵。
chunkFilename 指未被列在 entry 中,卻又需要被打包出來的 chunk 文件的名稱,output.chunkFilename 默認(rèn)使用[id].js或從 output.filename 中推斷出的值,id是輸出文件的塊id,一般是從1開始疊加的數(shù)字,除了[id]還可以配置占位符[name],[name]是文件按需引入時(shí)配置的chunkName值,如果沒有配置chunkName,[name] 會(huì)被預(yù)先替換為 [id]。
配置好chunkFilename后,還需要在文件按需引入時(shí)配置chunkName值,早期的按需引入使用require.ensure(),這就不說了,現(xiàn)在按需引入基本都是使用import(),在import()中我們加入chunkFilename 的配置,就可以修改打包后的文件路徑和文件名,配置以/* webpackChunkName: “xxx” */
的形式存在
const Login = () => import(/* webpackChunkName: "myLogin" */ '../components/login.vue')
在webpack 4的版本中chunkFilename必須是一個(gè)字符串,但是在webpack 5中,他也可以像filename一樣設(shè)置一個(gè)函數(shù),去自定義文件路徑和文件名。
chunkFilename字符串占位符對應(yīng)的結(jié)果和filename一樣,可以由以下參數(shù)拼接或者返回
webpack對css文件的打包需要用到插件,之前的webpack使用extract-text-webpack-plugin進(jìn)行css文件打包,這里不講了,現(xiàn)在的webpack使用mini-css-extract-plugin進(jìn)行css文件打包。
在mini-css-extract-plugin的配置中,同樣有關(guān)于filename和chunkFilename的配置,具體用法和修改js文件名的配置一樣。
const MiniCssExtractPlugin = require('mini-css-extract-plugin') new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional // filename: utils.assetsPath('css/[name].[contenthash].css'), filename: (pathData) => { return pathData.chunk.name == 'main' ? utils.assetsPath('css/youfilename.[hash].css') : utils.assetsPath('css/[name].[hash].css') }, chunkFilename: (pathData) => { return utils.assetsPath('css/[id].[hash].css') }, })
webpack對圖片等資源文件的打包需要用到url-loader 或者 file-loader 去合理地處理它們,而url-loader內(nèi)部也是封裝了file-loader去處理
webpack中對圖片等資源的打包配置在module.rules中,rules中可以通過options屬性值,把配置傳遞給url-loader或者file-loader。file-loader的配置項(xiàng)中有一個(gè)屬性name,我們可以通過配置這個(gè)name屬性來修改打包文件的文件路徑和文件名,name的配置同樣支持字符串占位符和函數(shù)兩種形式,通常我們像下面一樣配置字符串的形式
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { // 10000字節(jié)以下的圖片會(huì)被轉(zhuǎn)換為base64編碼 limit: 10000, // 生成 name+7位hash+ext格式的文件名 name: utils.assetsPath('img/[name].[hash:7].[ext]') } }
其中[name]、[hash]等占位符都和filename的占位符一樣
除了字符串形式,還可以像下面一樣配置更靈活的函數(shù)形式
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { // 10000字節(jié)以下的圖片會(huì)被轉(zhuǎn)換為base64編碼 limit: 10000, // 生成 name+7位hash+ext格式的文件名 name: function(filepath){ let filename = filepath.split('\\').pop() return process.env.NODE_ENV !== 'development' && filename == 'xxx.png' ? utils.assetsPath('img/youfilename.[ext]') : utils.assetsPath('img/[name].[hash:7].[ext]') } } },
以上就是關(guān)于“webpack打包時(shí)怎么修改文件名”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。