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代码中结点，更容易在开发、调试过程中找到对应代码。