const path = require('path')
|
const webpack = require('webpack')
|
const createThemeColorReplacerPlugin = require('./config/plugin.config')
|
const CompressionWebpackPlugin = require('compression-webpack-plugin')
|
const productionGzipExtensions = ['js', 'css']
|
|
function resolve(dir) {
|
return path.join(__dirname, dir)
|
}
|
|
// const isProd = process.env.NODE_ENV === 'production'
|
|
// const assetsCDN = {
|
// // webpack build externals
|
// externals: {
|
// vue: 'Vue',
|
// 'vue-router': 'VueRouter',
|
// vuex: 'Vuex',
|
// axios: 'axios'
|
// },
|
// css: [],
|
// // https://unpkg.com/browse/vue@2.6.10/
|
// js: [
|
// '//cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
|
// '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
|
// '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
|
// '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
|
// ]
|
// }
|
|
// vue.config.js
|
const vueConfig = {
|
lintOnSave: false, // 关闭eslintrc语法检查
|
|
configureWebpack: {
|
// webpack plugins
|
plugins: [
|
// Ignore all locale files of moment.js
|
// new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
new webpack.IgnorePlugin({
|
resourceRegExp: /^\.\/locale$/,
|
contextRegExp: /moment$/
|
}),
|
// maxChunks：使用大于或等于 1 的值，来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk，这是因为entry/main chunk 也会包含在计数之中。
|
// minChunkSize: 设置 chunk 的最小大小。
|
// 在合并 chunk 时，webpack 会尝试识别出具有重复模块的 chunk，并优先进行合并。任何模块都不会被合并到 entry chunk 中，以免影响初始页面加载时间。
|
new webpack.optimize.LimitChunkCountPlugin({
|
maxChunks: 5,
|
minChunkSize: 100
|
}),
|
// 配置compression-webpack-plugin压缩
|
new CompressionWebpackPlugin({
|
algorithm: 'gzip',
|
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
|
threshold: 10240,
|
minRatio: 0.8,
|
deleteOriginalAssets: false // 是否删除源文件 默认为true 如果Nginx配置了gzip可以true，否则删了源文件就不能正常访问了
|
})
|
]
|
// if prod, add externals
|
// externals: isProd ? assetsCDN.externals : {}
|
},
|
|
chainWebpack: (config) => {
|
config.resolve.alias
|
.set('@$', resolve('src'))
|
|
const svgRule = config.module.rule('svg')
|
svgRule.uses.clear()
|
svgRule
|
.oneOf('inline')
|
.resourceQuery(/inline/)
|
.use('vue-svg-icon-loader')
|
.loader('vue-svg-icon-loader')
|
.end()
|
.end()
|
.oneOf('external')
|
.use('file-loader')
|
.loader('file-loader')
|
.options({
|
name: 'assets/[name].[hash:8].[ext]'
|
})
|
|
// // if prod is on
|
// // assets require on cdn
|
// if (isProd) {
|
// config.plugin('html').tap(args => {
|
// args[0].cdn = assetsCDN
|
// return args
|
// })
|
// }
|
},
|
|
css: {
|
loaderOptions: {
|
less: {
|
modifyVars: {
|
'primary-color': '#FA541C',
|
'layout-color': '#FA541C',
|
'border-radius-base': '2px'
|
},
|
// DO NOT REMOVE THIS LINE
|
javascriptEnabled: true
|
}
|
}
|
},
|
|
devServer: {
|
port: 3333,
|
proxy: {
|
'/api': {
|
target: process.env.VUE_APP_API_BASE_URL,
|
ws: false,
|
changeOrigin: false
|
// pathRewrite: {
|
// '^/api': '' // 需要rewrite的,
|
// }
|
},
|
// '/hubs': {
|
// target: process.env.VUE_APP_SOCKET_BASE_URL,
|
// // ws: true,
|
// changeOrigin: true
|
// }
|
}
|
},
|
|
// disable source map in production
|
productionSourceMap: false,
|
// babel-loader no-ignore node_modules/*
|
transpileDependencies: []
|
}
|
|
// preview.pro.loacg.com only do not use in your production;
|
if (process.env.VUE_APP_PREVIEW === 'true') {
|
// eslint-disable-next-line no-labels
|
// runtimeCompiler: true,
|
// add `ThemeColorReplacer` plugin to webpack plugins
|
vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
|
}
|
|
module.exports = vueConfig
|
