vue篇- 如何修改打包好的css卷仑、js、img文件名
公司要求輸出一個完全靜態(tài)不變的index.html頁面給別人麸折，因而index.html中所有js,css文件名必須保證不變锡凝，只能更改文件名的版本號。原本想著是個簡單需求沒想到花了我整整半天時間垢啼，度娘并沒有給我滿意的答案窜锯，還傻乎乎地跑到尤大大的微博下問（可惜并沒理我）。
話不多說上代碼芭析。我用的是vueCli3.x锚扎，所有的修改全在vue.config.js中：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const conf = require('./conf/projectConfig');
module.exports = {
// 修改打包后js文件名
configureWebpack: { // webpack 配置
output: { // 輸出重構 打包編譯后的 文件名稱 【模塊名稱.版本號.js】
filename: `js/[name].${conf.version}.js`,
// chunkFilename: `js/[name].${conf.version}.js`
},
// 修改打包后css文件名
plugins: [
new MiniCssExtractPlugin({
filename: `css/[name].${conf.version}.css`,
// chunkFilename: `css/[name].${conf.version}.css`
})
]
},
// 修改打包后img文件名
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.tap(options => {
return {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: `img/[name].${conf.version}.[ext]`
}
}
};
})
}
}
看到?jīng)] css,js,img文件名的修改用三種完全不同的方式，每種方式都耗去我?guī)讉€小時的時間馁启。
有個問題就是生成的js驾孔、css確實有了帶版本號的文件，但同時也多出來了帶哈希文件名的文件
image.png
image.png
目的是達到了，但多出來的文件看著難受助币，應該可以解決的浪听，估計得去扒一會源碼，有大神知道怎么處理嗎眉菱？望告知迹栓。
還有個問題，要想生成完全靜態(tài)不變的index.html俭缓，得殘忍的拋棄路由里面的分包加載思想克伊，因為分包意味著你每多寫出一個模塊，就多一個js和css文件华坦。
-------------------------------------------------結束分割線---------------------------------------------------
