vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名

更新時(shí)間：2022年05月24日 14:59:04 作者：zuo-yiran

這篇文章主要介紹了vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

修改打包配置實(shí)現(xiàn)代碼打包后的自定義命名

打包后文件

在這里插入圖片描述

修改配置后打包為

在這里插入圖片描述

首先修改router文件

例如，這是原本方法引用頁(yè)面：

//基礎(chǔ)配置
import BasicDispose from './pages/BasicDispose/BasicDispose'

現(xiàn)修改為：

const BasicDispose = () => import(/* webpackChunkName: "BasicDispose" */ './pages/BasicDispose/BasicDispose')

注：

/* webpackChunkName: “BasicDispose” */內(nèi)的BasicDispose是打包后的文件名，可以隨意命名，一般是同一文件內(nèi)的頁(yè)面認(rèn)為是一個(gè)模塊，打包成一個(gè)js文件，而這個(gè)js文件以這些頁(yè)面的文件夾名字命名，比較便于理解。

打開(kāi)項(xiàng)目中的build文件夾

在這里插入圖片描述

修改js打包的命名方法

webpack.prod.conf.js文件中把

filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

修改為：

filename: utils.assetsPath('js/[name].js?v=[chunkhash]'),
chunkFilename: utils.assetsPath('js/[name].js?v=[chunkhash]')

如下所示：

output: {
?? ?path: config.build.assetsRoot,
?? ?//原始代碼設(shè)置
?? ?// filename: utils.assetsPath('js/[name].[chunkhash].js'),
?? ?// chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
?? ?filename: utils.assetsPath('js/[name].js?v=[chunkhash]'),
?? ?chunkFilename: utils.assetsPath('js/[name].js?v=[chunkhash]')
}

修改css打包的命名方法

webpack.prod.conf.js文件中把

filename: utils.assetsPath('css/[name].[contenthash].css'),

修改為：

filename: utils.assetsPath('css/[name].css?v=[contenthash]'),

如要修改圖片的打包命名的方法則在

module–rules內(nèi)關(guān)于圖片的修改如下圖所示修改對(duì)應(yīng)的路徑即可

在這里插入圖片描述

命名修改如下

name: utils.assetsPath('img/[name].[ext]?v=[hash:7]')

圖片還有一種情況是

對(duì)于小圖片，是直接壓縮成base64編碼的圖片，這里可以手動(dòng)修改limit的設(shè)置，這是極限大小的參數(shù)，小于極限參數(shù)會(huì)自動(dòng)進(jìn)行壓縮，如果將limit的值設(shè)的很大，使所有的圖片都進(jìn)行壓縮的話(huà)，雖然不會(huì)涉及到路徑的問(wèn)題，但是會(huì)使瀏覽器壓力很大,頁(yè)面的相應(yīng)時(shí)間會(huì)有影響。

vue 修改打包文件名

修改配置文件 webpack.prod.conf.js

output: {
? publicPath: './',
? path: config.build.assetsRoot,
? filename: utils.assetsPath('js/[name].js'),
? chunkFilename: utils.assetsPath('js/[id].js')
},
new ExtractTextPlugin({
? filename: utils.assetsPath('css/[name].css'),

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: