vue修改打包設定如何實現程式碼打包後的自定義命名

2022-05-24 18:01:35

修改打包設定實現程式碼打包後的自定義命名

打包後檔案

修改設定後打包為

首先修改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'),

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。