1const CompressionPlugin = require('compression-webpack-plugin'); 2const webpack = require('webpack'); 3const LimitChunkCountPlugin = webpack.optimize.LimitChunkCountPlugin; 4 5module.exports = { 6 css: { 7 loaderOptions: { 8 sass: { 9 additionalData: (() => { 10 const envName = process.env.VUE_APP_ENV_NAME; 11 const hasCustomStyles = 12 process.env.CUSTOM_STYLES === 'true' ? true : false; 13 if (hasCustomStyles && envName !== undefined) { 14 return ` 15 @import "@/assets/styles/bmc/helpers"; 16 @import "@/env/assets/styles/_${envName}"; 17 @import "@/assets/styles/bootstrap/_helpers"; 18 `; 19 } else { 20 return ` 21 @import "@/assets/styles/bmc/helpers"; 22 @import "@/assets/styles/bootstrap/_helpers"; 23 `; 24 } 25 })(), // immediately invoked function expression (IIFE) 26 }, 27 }, 28 }, 29 devServer: { 30 // Set DEV_HTTPS=true to run with HTTPS (helpful for testing secure-only features or with a signed cert) 31 // ref https://webpack.js.org/configuration/dev-server/#devserverserver 32 server: 33 process.env.DEV_HTTPS === 'true' ? { type: 'https' } : { type: 'http' }, 34 proxy: { 35 '/': { 36 target: process.env.BASE_URL, 37 onProxyRes: (proxyRes) => { 38 delete proxyRes.headers['strict-transport-security']; 39 }, 40 }, 41 }, 42 port: 8000, 43 }, 44 productionSourceMap: false, 45 chainWebpack: (config) => { 46 config.resolve.alias.set('vue', '@vue/compat'); 47 config.module 48 .rule('vue') 49 .use('vue-loader') 50 .tap((options) => { 51 options['compilerOptions'] = { compatConfig: { MODE: 2 } }; 52 return options; 53 }); 54 config.module 55 .rule('vue') 56 .use('vue-svg-inline-loader') 57 .loader('vue-svg-inline-loader'); 58 config.module 59 .rule('ico') 60 .test(/\.ico$/) 61 .use('file-loader') 62 .loader('file-loader') 63 .options({ 64 name: '[name].[contenthash:8].[ext]', 65 }); 66 config.plugins.delete('preload'); 67 if (process.env.NODE_ENV === 'production') { 68 config.plugin('html').tap((options) => { 69 options[0].filename = 'index.[hash:8].html'; 70 return options; 71 }); 72 } 73 }, 74 configureWebpack: (config) => { 75 config.plugins.push( 76 new LimitChunkCountPlugin({ 77 maxChunks: 1, 78 }), 79 ); 80 config.optimization.splitChunks = { 81 cacheGroups: { 82 default: false, 83 }, 84 }; 85 const crypto = require('crypto'); 86 const crypto_orig_createHash = crypto.createHash; 87 crypto.createHash = (algorithm) => 88 crypto_orig_createHash(algorithm == 'md4' ? 'sha256' : algorithm); 89 90 const envName = process.env.VUE_APP_ENV_NAME; 91 const hasCustomStore = process.env.CUSTOM_STORE === 'true' ? true : false; 92 const hasCustomRouter = process.env.CUSTOM_ROUTER === 'true' ? true : false; 93 const hasCustomAppNav = 94 process.env.CUSTOM_APP_NAV === 'true' ? true : false; 95 96 if (envName !== undefined) { 97 if (hasCustomStore) { 98 // If env has custom store, resolve all store modules. Currently found 99 // in src/router/index.js src/store/api.js and src/main.js 100 config.resolve.alias['./store$'] = `@/env/store/${envName}.js`; 101 config.resolve.alias['../store$'] = `@/env/store/${envName}.js`; 102 } 103 if (hasCustomRouter) { 104 // If env has custom router, resolve routes in src/router/index.js 105 config.resolve.alias['./routes$'] = `@/env/router/${envName}.js`; 106 } 107 if (hasCustomAppNav) { 108 // If env has custom AppNavigation, resolve AppNavigationMixin module in src/components/AppNavigation/AppNavigation.vue 109 config.resolve.alias['./AppNavigationMixin$'] = 110 `@/env/components/AppNavigation/${envName}.js`; 111 } 112 } 113 114 if (process.env.NODE_ENV === 'production') { 115 config.plugins.push( 116 new CompressionPlugin({ 117 deleteOriginalAssets: true, 118 }), 119 ); 120 } 121 122 config.performance = { 123 hints: 'warning', 124 maxEntrypointSize: 512000, 125 maxAssetSize: 512000, 126 }; 127 128 config.optimization.runtimeChunk = false; 129 }, 130 pluginOptions: { 131 i18n: { 132 localeDir: 'locales', 133 enableInSFC: true, 134 }, 135 }, 136}; 137