vue修改打包配置實現代碼打包後的自定義命名

打包後文件

修改配置後打包爲：

首先修改router文件：
例如，這是原本方法引用頁面：

//基礎配置
import BasicDispose from './pages/BasicDispose/BasicDispose'

現修改爲：

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

注：
/* webpackChunkName: “BasicDispose” */內的BasicDispose是打包後的文件名，可以隨意命名，一般是同一文件內的頁面認爲是一個模塊，打包成一個js文件，而這個js文件以這些頁面的文件夾名字命名，比較便於理解。

打開項目中的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,
	//原始代碼設置
	// 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內關於圖片的修改如下圖所示修改對應的路徑即可

命名修改如下：

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

圖片還有一種情況是：
對於小圖片，是直接壓縮成base64編碼的圖片，這裏可以手動修改limit的設置，這是極限大小的參數，小於極限參數會自動進行壓縮，如果將limit的值設的很大，使所有的圖片都進行壓縮的話，雖然不會涉及到路徑的問題，但是會使瀏覽器壓力很大,頁面的相應時間會有影響。