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

Posted on by

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

打包後文件

在這裡插入圖片描述

修改配置後打包為

在這裡插入圖片描述

首先修改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的值設的很大，使所有的圖片都進行壓縮的話，雖然不會涉及到路徑的問題，但是會使瀏覽器壓力很大,頁面的相應時間會有影響。

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'),

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：