vue.config.js 开发打包配置
基于vue-cli 4.x配置,觉得有必要的小伙伴可以当做模板直接使用。const path = require('path')const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const CompressionWebpackPlugin = require('compression-webpack-plugin')const { H
·
基于vue-cli 4.x配置,觉得有必要的小伙伴可以当做模板直接使用。
const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const { HashedModuleIdsPlugin } = require('webpack')
const isProduction = process.env.NODE_ENV === 'production'
// cdn预加载使用
const externals = {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'axios': 'axios',
'echarts': 'echarts',
'vue-i18n': 'VueI18n',
'node-forge': 'forge'
}
const cdn = {
// 开发环境
dev: {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
'https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css',
'https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css'
],
js: [
]
},
// 生产环境
build: {
css: [
'https://js.bitcert.com/style/element-ui.css',
'https://js.bitcert.com/style/font-awesome.min.css',
'https://js.bitcert.com/style/animate.min.css'
],
js: [
'https://js.bitcert.com/script/vue.min.js',
'https://js.bitcert.com/script/vuex.min.js',
'https://js.bitcert.com/script/vue-router.min.js',
'https://js.bitcert.com/script/vue-i18n.min.js',
'https://js.bitcert.com/script/axios.min.js',
'https://js.bitcert.com/script/element-ui.js',
'https://js.bitcert.com/script/echarts.min.js'
]
}
}
module.exports = {
productionSourceMap: !isProduction, // 生成环境不需要源码映射
// publicPath: process.env.NODE_ENV === 'development' ? './' : '/', // 配合路由使用history模式
publicPath: '/',
chainWebpack: config => {
// webpack 会默认给commonChunk打进chunk-vendors,所以需要对webpack的配置进行delete
config.optimization.delete('splitChunks')
config.plugin('html').tap(args => {
args[0].cdn = isProduction ? cdn.build : cdn.dev
return args
})
if (isProduction) {
// 分析 webpack 代码库拆分块
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
// 将makdown文件转换成vue组件
config.module.rule('md')
.test(/\.md/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
raw: true
})
return config
},
configureWebpack: config => {
const plugins = []
if (isProduction) {
// 取消注释和打印
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: true // 去掉注释
},
warnings: true,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] // 移除console
}
}
})
)
// 服务器也要相应开启gzip
plugins.push(
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /\.(js|css)$/, // 匹配文件名
threshold: 10 * 1024, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源文件
minRatio: 0.8 // 压缩比
})
)
// 用于根据模块的相对路径生成 hash 作为模块 id, 一般用于生产环境
plugins.push(
new HashedModuleIdsPlugin()
)
// 开启分离js
config.optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 1000 * 60,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
return `npm.${packageName.replace('@', '')}`
}
}
}
}
}
// 取消webpack警告的性能提示
config.performance = {
hints: 'warning',
// 入口起点的最大体积
maxEntrypointSize: 1000 * 500,
// 生成文件的最大体积
maxAssetSize: 1000 * 1000,
// 只给出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js')
}
}
config.externals = externals
}
return { plugins }
},
devServer: {
// ajax代理
// proxy: {
// '/api': {
// target: 'http://dev.bitcert.com',
// changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// }
// }
// }
},
pluginOptions: {
// 模块注入 全局less
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/common/style/variable.less')]
}
}
}
若中间有不当的地方请指正!
更多推荐
已为社区贡献6条内容
所有评论(0)