// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { VantResolver } = require('unplugin-vue-components/resolvers')
const ComponentsPlugin = require('unplugin-vue-components/webpack')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') // web3处理polyfill
const CompressionPlugin = require('compression-webpack-plugin')// 压缩
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') // 查看大小
const path = require('path')
const webpack = require('webpack')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: true,
publicPath: './',
outputDir: 'h5',
configureWebpack: {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()]
}),
// new BundleAnalyzerPlugin(),
new webpack.HotModuleReplacementPlugin(), // 只更新单个修改文件
new NodePolyfillPlugin(),
new CompressionPlugin({
test: /\.js$|\.html$|.\css/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
algorithm: 'gzip', // 使用gzip压缩
deleteOriginalAssets: false // 不删除源文件
// minRatio: 0.8 // 压缩比例
})
],
resolve: {
extensions: ['.js', '.css', '.jsx'], // 自动补全识别后缀
alias: {
assets: '@/assets',
components: '@/components',
views: '@/views',
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
}
},
optimization: {
splitChunks: {
// **`splitChunks.chunks: 'async'`**。表示哪些类型的chunk会参与split。默认是异步加载的chunk。值还可以是`initial`（表示入口同步chunk）、`all`（相当于`initial`+`async`）。
chunks: 'async',
// minSize 表示符合代码分割产生的新生成chunk的最小大小。默认是大于30kb的才会生成新的chunk
minSize: 400 * 1024,
// maxSize 表示webpack会尝试将大于maxSize的chunk拆分成更小的chunk，拆解后的值需要大于minSize
maxSize: 0,
// 一个模块被最少多少个chunk共享时参与split
minChunks: 1,
// 最大异步请求数。该值可以理解为一个异步chunk，被抽离出同时加载的chunk数不超过该值。若为1，该异步chunk将不会抽离出任意代码块
maxAsyncRequests: 5,
// 入口chunk最大请求数。在多entry chunk的情况下会用到，表示多entry chunk公共代码抽出的最大同时加载的chunk数
maxInitialRequests: 3,
// 初始chunk最大请求数。
// 多个chunk拆分出小chunk时，这个chunk的名字由多个chunk与连接符组合成
automaticNameDelimiter: '~',
// cacheGroups 表示分包分组规则，每一个分组会继承于default
// priority表示优先级，一个chunk可能被多个分组规则命中时，会使用优先级较高的
// test提供时 表示哪些模块会被抽离
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
filename: 'js/[name]/bundle.js',
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
// 复用已经生成的chunk
reuseExistingChunk: true
}
}
}
}
},
devServer: {
// 反向代理
// hot: true,proxyproxy
// index: '/login.html', // 默认打开文件
// open: true, // 自动打开浏览器
// host: 'localhost', // 默认打开域名
// port: 8080, // 默认打开端口号
// https: false, // 开启关闭https请求
// hotOnly: false, // 热更
proxy: {
// 配置跨域
'/api': {
target: process.env.VUE_APP_URL, // 代理地址，这里设置的地址会代替axios中设置的baseURL
ws: false, /// / proxy websockets
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: { // pathRewrite方法重写url
'^/api': '/'
}
},
'/api2': {
target: process.env.VUE_APP_URL_BIAN, // 代理地址，这里设置的地址会代替axios中设置的baseURL
ws: false, /// / proxy websockets
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: { // pathRewrite方法重写url
'^/api2': '/'
}
}
}
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
path.resolve(__dirname, './src/theme/style.less'),
path.resolve(__dirname, './src/assets/css/public.less')
]
}
},
// 不需要打包后定位问题 就设置false
productionSourceMap: false,
// 配置title
chainWebpack: (config) => {
config.plugin('define').tap((args) => {
args[0].process = { ...args[0]['process.env'] }
return args
})
config.plugin('html').tap((args) => {
args[0].title = 'Knight Trade'
return args
})
// 压缩图片
config.module
.rule('image')
.test(/\.(png|jpe?g)(\?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
// mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像
// optipng: { enabled: true }, // 压缩PNG图像
// pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像
// gifsicle: { interlaced: false }, // 压缩GIF图像
// 当图片小于1024的时候会把图片转为base64格式
limit: 1024,
// [name]代表图片名称；[hash:8]代表8位自动生成的哈希值；[ext]代表图片的后缀名
name: 'img/[name].[hash:4].[ext]',
// 此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快
disable: process.env.NODE_ENV !== 'production'
})
.end()
}
})
