119 lines
4.5 KiB
JavaScript
119 lines
4.5 KiB
JavaScript
let path = require('path') // 引入path模块
|
||
const webpack = require('webpack') // 引入webpack模块
|
||
const ThemeColorReplacer = require('webpack-theme-color-replacer') // 引入webpack-theme-color-replacer插件 主题色替换插件
|
||
const {getThemeColors, modifyVars} = require('./src/utils/themeUtil') // 引入主题色替换工具
|
||
const {resolveCss} = require('./src/utils/theme-color-replacer-extend') // 引入主题色替换工具
|
||
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 引入webpack压缩插件
|
||
|
||
const productionGzipExtensions = ['js', 'css'] // 需要压缩的文件后缀
|
||
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境
|
||
|
||
const assetsCDN = { // 静态资源CDN地址
|
||
// webpack 编译好的文件存在哪里
|
||
externals: {
|
||
vue: 'Vue',
|
||
'vue-router': 'VueRouter',
|
||
vuex: 'Vuex',
|
||
axios: 'axios',
|
||
nprogress: 'NProgress',
|
||
clipboard: 'ClipboardJS',
|
||
'@antv/data-set': 'DataSet',
|
||
'js-cookie': 'Cookies'
|
||
},
|
||
css: [
|
||
],
|
||
js: [
|
||
'/js/vue.min.js',
|
||
'/js/vue-router.min.js',
|
||
'/js/vuex.min.js',
|
||
'/js/axios.min.js',
|
||
'/js/nprogress.min.js',
|
||
'/js/clipboard.min.js',
|
||
'/js/data-set.min.js',
|
||
'/js/js.cookie.min.js'
|
||
]
|
||
}
|
||
|
||
module.exports = {
|
||
devServer: { // 代理配置
|
||
proxy: {
|
||
'/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
|
||
target: process.env.VUE_APP_API_BASE_URL,
|
||
changeOrigin: true,
|
||
pathRewrite: {
|
||
'^/api': ''
|
||
}
|
||
}
|
||
}
|
||
},
|
||
pluginOptions: { // 插件配置
|
||
'style-resources-loader': { // 全局样式配置
|
||
preProcessor: 'less', // 预处理器
|
||
patterns: [path.resolve(__dirname, "./src/theme/theme.less")], // 引入全局样式
|
||
}
|
||
},
|
||
// webpack配置
|
||
configureWebpack: config => { // webpack 配置
|
||
config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"]; // 兼容ie
|
||
config.performance = { // 性能配置
|
||
hints: false // 关闭性能提示
|
||
}
|
||
config.plugins.push( // 配置主题色替换插件
|
||
new ThemeColorReplacer({ // 主题色替换插件
|
||
fileName: 'css/theme-colors-[contenthash:8].css', // 生成的文件名
|
||
matchColors: getThemeColors(), // 主题色 从src/utils/themeUtil.js中获取
|
||
injectCss: true, // 是否注入css
|
||
resolveCss // 解析css
|
||
})
|
||
)
|
||
// Ignore all locale files of moment.js
|
||
config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) // 忽略moment的本地化文件
|
||
// 生产环境下将资源压缩成gzip格式
|
||
if (isProd) { // 如果是生产环境
|
||
// add `CompressionWebpack` plugin to webpack plugins
|
||
config.plugins.push(new CompressionWebpackPlugin({ // 配置webpack压缩插件
|
||
algorithm: 'gzip', // 压缩算法
|
||
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
|
||
threshold: 10240, // 对超过10k的数据压缩
|
||
minRatio: 0.8 // 压缩比例，值为0 ~ 1
|
||
}))
|
||
}
|
||
// if prod, add externals
|
||
if (isProd) { // 如果是生产环境
|
||
config.externals = assetsCDN.externals // 配置静态资源CDN地址
|
||
}
|
||
},
|
||
chainWebpack: config => { // webpack 链式配置
|
||
// 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
|
||
if (isProd) { // 如果是生产环境
|
||
config.plugin('optimize-css') // 配置css压缩
|
||
.tap(args => { // 获取参数
|
||
args[0].cssnanoOptions.preset[1].colormin = false // 关闭colormin
|
||
return args // 返回参数
|
||
})
|
||
}
|
||
// 生产环境下使用CDN
|
||
if (isProd) { // 如果是生产环境
|
||
config.plugin('html') // 配置html
|
||
.tap(args => { // 获取参数
|
||
args[0].cdn = assetsCDN // 配置静态资源CDN地址
|
||
return args // 返回参数
|
||
})
|
||
}
|
||
},
|
||
css: { // css配置
|
||
loaderOptions: { // css预设器配置项
|
||
less: { // 配置less（其他样式解析用法一致）
|
||
lessOptions: { // less 配置
|
||
modifyVars: modifyVars(), // 主题色 从src/utils/themeUtil.js中获取
|
||
javascriptEnabled: true // 允许内联js 用于动态修改主题色
|
||
}
|
||
}
|
||
}
|
||
},
|
||
publicPath: process.env.VUE_APP_PUBLIC_PATH, // 部署应用包时的基本 URL
|
||
outputDir: 'dist', // 生产环境构建文件的目录
|
||
assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
|
||
productionSourceMap: false // 生产环境的 source map
|
||
}
|