VUE3.0的打包配置修改
最近在玩在線工具這一塊，網上有一個開源應用：PPTist，能夠還原大部分PPT功能，實現了PPT的在線編輯、演示。
從Git拉下來的代碼，使用npm編譯後，js文件名字，後面都帶一堆hash，且JS的內部全部經過混淆了，變量、函數名稱變成abcd之類，很不爽，也不好調試、定位。
經過網絡上的一通搜索、學習。VUE3默認情況了，發佈的生產版本，會對js進行混淆，文件名也帶hash，希望修改這個默認，需要修改vue.config.js。（網上很多是說webpack.config.js，vue確實是通過webpack打包，但他也對webpack進行了封裝，新版本的VUE是看不到webpack.config.js文件了）。
PPTist的vue.config.js文件內容目前爲：
/* eslint-disable @typescript-eslint/no-var-requires */
const StyleLintPlugin = require('stylelint-webpack-plugin')
module.exports = {
publicPath: './',
css: {
loaderOptions: {
sass: {
prependData: `
@import '~@/assets/styles/variable.scss';
@import '~@/assets/styles/mixin.scss';
`,
},
less: {
lessOptions: {
modifyVars: {
'primary-color': '#d14424',
'text-color': '#41464b',
'font-size-base': '13px',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
},
},
configureWebpack: {
plugins: [
new StyleLintPlugin({
files: ['src/**/*.{vue,html,css,scss,sass,less}'],
failOnError: false,
cache: false,
fix: false,
}),
],
},
pwa: {
name: 'PPTist',
themeColor: '#d14424',
iconPaths: {
faviconSVG: null,
favicon32: 'icons/favicon-32x32.png',
favicon16: 'icons/favicon-16x16.png',
appleTouchIcon: 'icons/apple-touch-icon-152x152.png',
maskIcon: null,
msTileImage: null,
},
manifestOptions: {
name: 'PPTist',
short_name: 'PPTist',
theme_color: '#d14424',
icons: [{
src: 'icons/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png'
}, {
src: 'icons/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png'
}, {
src: 'icons/android-chrome-maskable-192x192.png',
sizes: '192x192',
type: 'image/png',
purpose: 'maskable'
}, {
src: 'icons/android-chrome-maskable-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable'
}],
start_url: '.',
display: 'standalone',
background_color: '#000000',
},
workboxOptions: {
runtimeCaching: [{
urlPattern: /.*/,
handler: 'networkFirst',
options: {
cacheName: 'PPTist',
expiration: {
maxAgeSeconds: 60 * 60 * 10,
},
cacheableResponse: {
statuses: [0, 200]
}
}
}],
include: [
/\.ttf$/,
],
skipWaiting: true,
}
},
}
詳細解說可以參考其他資料。
首先我們找到，configureWebpack部分的內容。
configureWebpack的內容，根據資料，可以爲一個對象或函數。如果這個值是一個對象，則會通過 webpack-merge 合併到最終的配置中。
如果這個值是一個函數，則會接收被解析的配置作爲參數。該函數及可以修改配置並不返回任何東西，也可以返回一個被克隆或合併過的配置版本。
（VUE還支持chainWebpack選項配置，chainWebpack 通過鏈式編程的形式，來修改默認的webpack配置）
在當前的vue.config.js中，可以看到是一個對象，對象內容是一個StyleLintPlugin實例。
而網絡上搜索到的，根據環境修改配置，則爲一個函數，因此先註釋掉原有配置。
修改爲：
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
config.mode = 'production'
// 將每個依賴包打包成單獨的js文件
let optimization = {
runtimeChunk: 'single',
minimize: false,
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000, // 依賴包超過20000bit將被單獨打包
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
}
}
Object.assign(config, {
optimization
})
}
},
此處的修改，參考了https://www.cnblogs.com/ypSharing/p/vue-webpack.html。
這兒的optimization中，minimize爲false，則表示不進行代碼最小、混淆化。
而splitChunks則不合並當前組件所依賴的模塊js文件，會在當前目錄下生成以node的modules名對應的js與js.map文件。
修改configureWebpack爲函數後，將原來的功能恢復過來，則增加如下代碼：
//configureWebpack: {
//plugins: [
// new StyleLintPlugin({
// files: ['src/**/*.{vue,html,css,scss,sass,less}'],
// failOnError: false,
// cache: false,
// fix: false,
// }),
//],
//},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
config.mode = 'production'
// 將每個依賴包打包成單獨的js文件
let optimization = {
runtimeChunk: 'single',
minimize: false,
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000, // 依賴包超過20000bit將被單獨打包
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
}
}
Object.assign(config, {
optimization
})
}
config.plugins.push(
new StyleLintPlugin({
files: ['src/**/*.{vue,html,css,scss,sass,less}'],
failOnError: false,
cache: false,
fix: false,
})
)
},
在if語句之後，修改config.plugins，往其中添加一個StyleLintPlugin實例。
PPTist的代碼庫，項目的版本號爲v0.0.1，實在不適合用來添加到文件名上。
因此採用獲取Git代碼庫的提交Hash方式（短hash)來重新命名js文件。
首先在vue.config.js文件頭部添加如下代碼，以取得Git提交Hash。
const execSync = require('child_process').execSync; //同步子進程
const GIT_HASH = execSync('git show -s --format=%h').toString().trim(); //當前提交的版本號
然後修改configureWebpack內容爲：
//configureWebpack: {
//plugins: [
// new StyleLintPlugin({
// files: ['src/**/*.{vue,html,css,scss,sass,less}'],
// failOnError: false,
// cache: false,
// fix: false,
// }),
//],
//},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
config.mode = 'production'
// 將每個依賴包打包成單獨的js文件
let optimization = {
runtimeChunk: 'single',
minimize: false,
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000, // 依賴包超過20000bit將被單獨打包
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
}
}
Object.assign(config, {
optimization
})
}
config.plugins.push(
new StyleLintPlugin({
files: ['src/**/*.{vue,html,css,scss,sass,less}'],
failOnError: false,
cache: false,
fix: false,
})
)
config.output.filename = '[name].' + GIT_HASH + '.js'
config.output.chunkFilename = '[name].' + GIT_HASH + '.js'
},
至此，生成的js文件不再是以文件內容hash爲後綴了（每次打包不同，可能就會導致Hash變化）。
使用Git庫的提交Hash，根據此Hash，可以很容易定位到Git代碼中結點，更容易在開發、調試過程中找到對應代碼。