| commit | author | age | ||
| 9bcb19 | 1 | const path = require('path') |
| I | 2 | const webpack = require('webpack') |
| 3 | const createThemeColorReplacerPlugin = require('./config/plugin.config') | |
| 4 | const CompressionWebpackPlugin = require('compression-webpack-plugin') | |
| 5 | const productionGzipExtensions = ['js', 'css'] | |
| 6 | ||
| 7 | function resolve (dir) { | |
| 8 | return path.join(__dirname, dir) | |
| 9 | } | |
| 10 | ||
| 11 | const isProd = process.env.NODE_ENV === 'production' | |
| 12 | ||
| 13 | const assetsCDN = { | |
| 14 | // webpack build externals | |
| 15 | externals: { | |
| 16 | vue: 'Vue', | |
| 17 | 'vue-router': 'VueRouter', | |
| 18 | vuex: 'Vuex', | |
| 19 | axios: 'axios' | |
| 20 | }, | |
| 21 | css: [], | |
| 22 | // https://unpkg.com/browse/vue@2.6.10/ | |
| 23 | js: [ | |
| 24 | '//unpkg.com/vue@2.6.10/dist/vue.min.js', | |
| 25 | '//unpkg.com/vue-router@3.1.3/dist/vue-router.min.js', | |
| 26 | '//unpkg.com/vuex@3.1.1/dist/vuex.min.js', | |
| 27 | '//unpkg.com/axios@0.19.0/dist/axios.min.js' | |
| 28 | ] | |
| 29 | } | |
| 30 | ||
| 31 | // vue.config.js | |
| 32 | const vueConfig = { | |
| 33 | configureWebpack: { | |
| 34 | // webpack plugins | |
| 35 | plugins: [ | |
| 36 | // Ignore all locale files of moment.js | |
| 37 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), | |
| 38 | // 配置compression-webpack-plugin压缩 | |
| 39 | new CompressionWebpackPlugin({ | |
| 40 | algorithm: 'gzip', | |
| 41 | test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), | |
| 42 | threshold: 10240, | |
| 43 | minRatio: 0.8 | |
| 44 | }) | |
| 45 | ], | |
| 46 | // if prod, add externals | |
| 47 | externals: isProd ? assetsCDN.externals : {} | |
| 48 | }, | |
| 49 | ||
| 50 | chainWebpack: (config) => { | |
| 51 | config.resolve.alias | |
| 52 | .set('@$', resolve('src')) | |
| 53 | ||
| 54 | const svgRule = config.module.rule('svg') | |
| 55 | svgRule.uses.clear() | |
| 56 | svgRule | |
| 57 | .oneOf('inline') | |
| 58 | .resourceQuery(/inline/) | |
| 59 | .use('vue-svg-icon-loader') | |
| 60 | .loader('vue-svg-icon-loader') | |
| 61 | .end() | |
| 62 | .end() | |
| 63 | .oneOf('external') | |
| 64 | .use('file-loader') | |
| 65 | .loader('file-loader') | |
| 66 | .options({ | |
| 67 | name: 'assets/[name].[hash:8].[ext]' | |
| 68 | }) | |
| 69 | ||
| 70 | // if prod is on | |
| 71 | // assets require on cdn | |
| 72 | if (isProd) { | |
| 73 | config.plugin('html').tap(args => { | |
| 74 | args[0].cdn = assetsCDN | |
| 75 | return args | |
| 76 | }) | |
| 77 | } | |
| 78 | }, | |
| 79 | ||
| 80 | css: { | |
| 81 | loaderOptions: { | |
| 82 | less: { | |
| 83 | modifyVars: { | |
| 84 | 'primary-color': '#1890FF', | |
| 85 | 'layout-color': '#1890FF', | |
| 86 | 'border-radius-base': '2px' | |
| 87 | }, | |
| 88 | // DO NOT REMOVE THIS LINE | |
| 89 | javascriptEnabled: true | |
| 90 | } | |
| 91 | } | |
| 92 | }, | |
| 93 | ||
| 94 | devServer: { | |
| 95 | port: 81, | |
| 96 | proxy: { | |
| 97 | '/api': { | |
| 98 | target: process.env.VUE_APP_API_BASE_URL, | |
| 99 | ws: false, | |
| 100 | changeOrigin: true, | |
| 101 | pathRewrite: { | |
| 102 | '^/api': '' // 需要rewrite的, | |
| 103 | } | |
| 104 | } | |
| 105 | } | |
| 106 | }, | |
| 107 | ||
| 108 | // disable source map in production | |
| 109 | productionSourceMap: false, | |
| 110 | lintOnSave: undefined, | |
| 111 | // babel-loader no-ignore node_modules/* | |
| 112 | transpileDependencies: [] | |
| 113 | } | |
| 114 | ||
| 115 | // preview.pro.loacg.com only do not use in your production; | |
| 116 | if (process.env.VUE_APP_PREVIEW === 'true') { | |
| 117 | // eslint-disable-next-line no-labels | |
| 118 | // runtimeCompiler: true, | |
| 119 | // add `ThemeColorReplacer` plugin to webpack plugins | |
| 120 | vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin()) | |
| 121 | } | |
| 122 | ||
| 123 | module.exports = vueConfig | |
