重写 Webpack 的配置信息
// cnpm install compression-webpack-plugin@6.1.1 -D gzip压缩插件,需要引入
// cnpm i image-webpack-loader@8.1.0 --save-dev 图片压缩,不需要引入
// npm i webpack-bundle-analyzer@4.7.0 --save-dev 打包分析插件
// npm i speed-measure-webpack-plugin -D 打包时间
// npm i hard-source-webpack-plugin -D 构建时进行缓存
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启gzip压缩, 按需引用
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 引入打包分析插件
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack = require('webpack')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i // 开启gzip压缩, 按需写入
const isProduction = process.env.NODE_ENV === 'production'
const BASE_URL = process.env.NODE_ENV === 'production' ? './' : './'
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 其他配置可以走默认
publicPath: BASE_URL, // 基本路径
outputDir: 'dist', // 输出文件目录
lintOnSave: process.env.NODE_ENV !== 'production', // 生产环境不进行eslint校验
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// assetsDir: '', // 静态文件要不要放在一个文件夹里,默认值是‘’,有需要可以自己改
// webpack配置
chainWebpack: config => {
// 移除 preload(预载) 插件
config.plugins.delete('preload')
// 移除 prefetch(预取) 插件
config.plugins.delete('prefetch')
if (isProduction) {
// 生产环境下---压缩图片
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
}
},
configureWebpack: (config) => {
// 生产和开发环境都有的配置
config.devtool = 'source-map'
// 开启缓存
config.plugins.push(
new HardSourceWebpackPlugin()
)
// 配置别名
Object.assign(config.resolve, {
alias: {
'@': path.resolve(__dirname, './src')
}
})
// 生产环境下的配置
if (isProduction) {
// 添加webpack插件
config.plugins.push(
new SpeedMeasurePlugin(), // 构建时间
new BundleAnalyzerPlugin() // 构建体积
// 一些依赖,咱们也许只是用到了一部分,不必所有解析,好比moment中的语言包,咱们通常只用中文包就够了,因此能够这样配置:
// new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
)
// 打包文件大小配置
config.performance = {
maxEntrypointSize: 10000000, // 根据入口起点的最大体积,控制 webpack 何时生成性能提示。
maxAssetSize: 30000000 // 根据单个资源体积(单位: bytes),控制 webpack 何时生成性能提示。
}
// 生产环境 优化打包chunk-vendors.js文件体积过大。
Object.assign(config.optimization, {
runtimeChunk: 'single',
splitChunks: { // 默认的splitChunks会全部清空
chunks: 'all',
minSize: 20 * 1024 // chunks超过20000bit(20kb)将被单独打包
// cacheGroups: { // 对node_modules下的库单独打包。暂时先不开启,可以看看打包体积后决定
// vendor: { // 默认的vendor.js
// 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('@', '')}`
// }
// }
// }
}
})
// 清除console.log
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
// 开启 gzip 压缩 文件
// 注:生成的压缩文件以.gz为后缀,一般浏览器都已支持.gz的资源文件,在http请求的Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz文件,还需要对服务器进行配置,根据Request Headers的Accept-Encoding标签进行鉴别,如果支持gzip就返回.gz文件。
// 服务器配置参考:https://blog.csdn.net/a1983029606/article/details/115690820
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240, // 只有大小大于该值的资源会被处理
minRatio: 0.8 // 只有压缩率小于这个值的资源才会被处理
})
)
}
},
// css相关配置
css: {
loaderOptions: {
// 启用less中javascript支持
less: {
// less-lorder配置项 详见 https://www.webpackjs.com/loaders/less-loader/#lessoptions
javascriptEnabled: true
}
}
},
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0', // ip 本地
port: 2023, // 设置端口号
// inline: true, // 用于设置代码保存时是否自动刷新页面。默认:true
// open: false, //配置自动启动浏览器,默认:false
// hot: true, // 用于设置代码保存时是否进行热更新(局部刷新,不刷新整个页面)。默认:true
// https: false, // 用于设置是否启用https,默认:false
proxy: {
// 设置代理
'/api': {
// 代理名称 凡是使用/api开头的地址都是用此代理
target: 'http://1.2.3.4:5000/', // 需要代理访问的api地址
changeOrigin: true // 允许跨域请求
// pathRewrite: {
// // 重写路径,替换请求地址中的指定路径
// '^/api': '/' // 将请求地址中的/api替换为空,也就是请求地址中不会包含/api/
// }
}
}
},
// 第三方插件配置
pluginOptions: {}
}
重写 Vite 的配置信息
vue.config.js
是一个可选的配置文件,可以在其中定义一些自定义的配置选项,以覆盖 Vite 的默认配置。你可以在这个文件中引入 Vite 的相关模块,然后使用 Vite 的 API 来修改或扩展默认配置。
以下是一个示例 vue.config.js
文件,用于重写 Vite 的配置信息:
// vue.config.js
module.exports = {
// 在这里定义你的自定义配置
// 例如,修改默认的构建输出目录
build: {
outDir: 'dist'
}
}
在上面的示例中,我们通过 module.exports
导出一个对象,该对象包含一个 build
属性,用于修改默认的构建输出目录。在构建过程中,Vite 将使用这个新的输出目录来生成构建结果。
要使 vue.config.js
文件生效,确保将其放置在项目的根目录下,并在 Vite 的配置中引用它。例如,如果你使用的是 Vite 的 vite.config.js
配置文件,可以在其中添加以下代码来引用 vue.config.js
:
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 引用 vue.config.js 文件
import { vueConfig } from './vue.config.js'
export default defineConfig({
plugins: [vue()],
// 将 vueConfig 合并到默认配置中
...vueConfig,
resolve: {
alias: {
// 在这里添加自定义的别名配置
}
},
build: {
// 在这里添加自定义的构建配置
},
// 在这里添加其他 Vite 配置选项
})
在上面的示例中,我们通过将 vueConfig
对象合并到默认配置中,将 vue.config.js
中的自定义配置应用到整个 Vite 项目中。你还可以根据需要添加其他的自定义配置选项,例如别名(alias)和构建选项(build options)。