vue项目打包分包和加hash值
const { defineConfig } = require('@vue/cli-service')
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")
function resolve(dir) { // 拿到文件的函数
return path.join(__dirname, dir);// 将当前文件和dir参数的路径自动合并成为正确的路径
}
module.exports = defineConfig({
// filenameHashing: true, // 打包后为文件名增加hash值
// chainWebpack: config => {
// config.output.filename('js/[name].[hash].js').end()
// // 如果filenameHashing设置为了false,可以通过这段代码给打包出的css文件增加hash值
// // config.plugin('extract-css').tap(args => [{
// // filename: 'assets/css/[name].[hash].css',
// // chunkFilename: 'assets/css/[name].[hash].css'
// // }])
// },
filenameHashing: true, // 打包后为文件名增加hash值
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('./src'))
.set('components', resolve('./src/components'))
.set('views', resolve('./src/views'))
.set('assets', resolve('./src/assets'))
.set('dictionary', resolve('./src/dictionary'))
.set('hooks', resolve('./src/utils/hooks'))
//set第一个参数:设置的别名,第二个参数:设置的路径
config.output.filename('js/[name].[hash].js').end()
},
transpileDependencies: true,
//productionSourceMap: true, //开启代码映射
devServer: {
// port: '8080', // 设置端口号
proxy: {
'/api': {
target: 'http://47.98.143.143:8080', //API服务器的地址
//target: 'http://192.168.31.89:8080',
ws: true, //代理websockets
changeOrigin: true, // 是否跨域,虚拟的站点需要更管origin
pathRewrite: {
// '^/api'是一个正则表达式,表示要匹配请求的url中,全部'http://localhost:8081/api' 转接为 http://localhost:8081/
'^/api': '',
}
}
},
},
configureWebpack: config => {
return {
// 看这里:把chunk-vendors.js进行分包,提升资源加载速度,很有必要
optimization: {
/**
* runtimeChunk可选值有:true或'multiple'或'single'
* true或'multiple'会有每个入口对应的chunk。不过一般情况下
* 考虑到要模块初始化,设置为single就够多数情况下使用啦。
* 详情见官网:https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
* */
runtimeChunk: 'single',
/**
* 以前是CommonsChunkPlugin,现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
* 详情见官网:https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
* */
splitChunks: {
chunks: 'all', // 可选值:all,async 和 initial。all功能最强大,所以咱们就使用all
maxInitialRequests: Infinity, // 最大并行请求数,为了以防万一,设置无穷大即可
minSize: 200000, // 引入的模块大于20kb才做代码分割,官方默认20000,这里不用修改了
maxSize: 600000, // 若引入的模块大于60kb,则告诉webpack尝试再进行拆分
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
priority: -10, // 优先级值越大优先级越高,默认-10,不用修改
name(module) { // 设定分包以后的文件模块名字,按照包名字替换拼接一下
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
return `npm.${packageName.replace('@', '')}`
},
},
},
}
},
externals: {
/**
* 这里采用Object的形式
* 更多的形式参考(https://webpack.js.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx)
* key: 依赖包的名字
* value: 依赖包挂载在项目中的变量名
* 挂载的变量必须与依赖包中挂载的一样,在项目中使用也是这个变量名
*/
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'axios': 'axios',
// 'echarts': 'echarts'
}
}
},
})
externals 打包忽略的依赖,自己在index.html 引入cdn方式优化速度。
optimization 内就是分包配置,依赖的第三方库比如element ui modules里的依赖 分为最大最小区间
config.output.filename(‘js/[name].[hash].js’).end() 打包文件增加hash值,不让浏览器缓存。