let path = require('path')
|
const webpack = require('webpack')
|
const ThemeColorReplacer = require('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')
|
|
const productionGzipExtensions = ['js', 'css']
|
const isProd = process.env.NODE_ENV === 'production'
|
|
const assetsCDN = {
|
// webpack build externals
|
externals: {},
|
css: [],
|
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")],
|
}
|
},
|
configureWebpack: config => {
|
config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
|
config.performance = {
|
hints: false
|
}
|
config.plugins.push(
|
new ThemeColorReplacer({
|
fileName: 'css/theme-colors-[contenthash:8].css',
|
matchColors: getThemeColors(),
|
injectCss: true,
|
resolveCss
|
})
|
)
|
// Ignore all locale files of moment.js
|
config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
|
// 生产环境下将资源压缩成gzip格式
|
if (isProd) {
|
// add `CompressionWebpack` plugin to webpack plugins
|
config.plugins.push(new CompressionWebpackPlugin({
|
algorithm: 'gzip',
|
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
|
threshold: 10240,
|
minRatio: 0.8
|
}))
|
}
|
// if prod, add externals
|
if (isProd) {
|
config.externals = assetsCDN.externals
|
}
|
},
|
chainWebpack: config => {
|
// 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
|
if (isProd) {
|
config.plugin('optimize-css')
|
.tap(args => {
|
args[0].cssnanoOptions.preset[1].colormin = false
|
return args
|
})
|
}
|
// 生产环境下使用CDN
|
if (isProd) {
|
config.plugin('html')
|
.tap(args => {
|
args[0].cdn = assetsCDN
|
return args
|
})
|
}
|
},
|
css: {
|
loaderOptions: {
|
less: {
|
lessOptions: {
|
modifyVars: modifyVars(),
|
javascriptEnabled: true
|
}
|
}
|
}
|
},
|
publicPath: process.env.VUE_APP_PUBLIC_PATH,
|
outputDir: 'dist',
|
assetsDir: 'static',
|
productionSourceMap: false
|
}
|
