vue.config.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. const fs = require('fs');
  2. const path = require('path')
  3. const webpack = require('webpack')
  4. const createThemeColorReplacerPlugin = require('./config/plugin.config')
  5. // gzip ѹ��
  6. const compressionWebpackPlugin = require('compression-webpack-plugin');
  7. // js,css ѹ��
  8. const TerserPlugin = require('terser-webpack-plugin');
  9. // �汾�Զ�����
  10. const WebpackVersionPlugin = require('webpack-version-plugin');
  11. const versionConfig = require(resolve('public/version.json'));
  12. function resolve (dir) {
  13. return path.join(__dirname, dir)
  14. }
  15. /**
  16. * check production or preview(pro.loacg.com only)
  17. * @returns {boolean}
  18. */
  19. function isProd () {
  20. return process.env.NODE_ENV === 'production'
  21. }
  22. // ��Ŀ������ᅣ1�7
  23. // Ĭ������£����Ǽ������Ӧ�ý�����������ĸ�Ŀ¼�ᅣ1�7
  24. // ���磺https://www.my-app.com/
  25. // Ĭ�ϣ�'/'
  26. // �������Ӧ�ó���������·���У�����Ҫ����ָ����·�ᅣ1�7
  27. // ���磺https://www.foobar.com/my-app/
  28. // ��Ҫ������Ϊ'/my-app/'
  29. const BASE_URL = isProd ? '/' : '/'
  30. const assetsCDN = {
  31. css: [],
  32. // https://unpkg.com/browse/vue@2.6.10/
  33. js: [
  34. '//vuepkg.oss-cn-beijing.aliyuncs.com/vue.min.js',
  35. '//vuepkg.oss-cn-beijing.aliyuncs.com/vue-router.min.js',
  36. '//vuepkg.oss-cn-beijing.aliyuncs.com/vuex.min.js',
  37. '//vuepkg.oss-cn-beijing.aliyuncs.com/axios.min.js',
  38. // '//vuepkg.oss-cn-beijing.aliyuncs.com/lodash.min.js',
  39. '//vuepkg.oss-cn-beijing.aliyuncs.com/echarts.min.js'
  40. ]
  41. }
  42. // webpack build externals
  43. const prodExternals = {
  44. vue: 'Vue',
  45. 'vue-router': 'VueRouter',
  46. vuex: 'Vuex',
  47. axios: 'axios',
  48. echarts: 'echarts',
  49. // lodash : {
  50. // commonjs: "lodash",
  51. // amd: "lodash",
  52. // root: "_" // indicates global variable
  53. // },
  54. 'mockjs2': 'Mock'
  55. }
  56. // vue.config.js
  57. const vueConfig = {
  58. runtimeCompiler: true, // ��̬������ᅣ1�7
  59. publicPath: BASE_URL,
  60. configureWebpack: {
  61. optimization: isProd() ? {
  62. minimize: true,
  63. minimizer: [new TerserPlugin({
  64. test: /\.js(\?.*)?$/i, //ƥ�����ѹ�����ļᅣ1�7
  65. parallel: true, //ʹ�ö���̲������ᅣ1�7
  66. terserOptions: { //Terser ѹ������
  67. output:{comments: false},
  68. compress: {//consoleɾ��
  69. pure_funcs: ["console.log"]
  70. }
  71. },
  72. extractComments: true, //��ע�Ͱ��뵽�������ļ���
  73. })],
  74. }:{},
  75. // webpack plugins
  76. plugins: [
  77. // Ignore all locale files of moment.js
  78. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  79. new compressionWebpackPlugin({
  80. //[file] �ᱻ�滻��ԭʼ��Դ��[path] �ᱻ�滻��ԭʼ��Դ��·���� [query] �ᱻ�滻�ɲ�ѯ�ַ�����Ĭ��ֵ�� "[path].gz[query]"��
  81. filename: '[path].gz[query]', // ��ʾcompression-webpack-plugin@3.0.0�Ļ�asset��Ϊfilename
  82. //������ function(buf, callback) �����ַ����������ַ�����˵���� zlib ���㷨(���� zopfli ���㷨)��Ĭ��ֵ�� "gzip"��
  83. algorithm: 'gzip',
  84. //����ƥ����������Դ���ᱻ������Ĭ��ֵ��ȫ����Դ��
  85. test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
  86. //ֻ�д�С���ڸ�ֵ����Դ�ᱻ��������λ�� bytes��Ĭ��ֵ�� 0��
  87. threshold: 10240,
  88. //ֻ��ѹ����С�����ֵ����Դ�Żᱻ������Ĭ��ֵ�ᅣ1�70.8��
  89. minRatio: 0.8
  90. }),
  91. new WebpackVersionPlugin({
  92. // You must set the cb option
  93. cb: function(hashMap) {
  94. if(!isProd()){
  95. versionConfig.version = new Date().getTime();
  96. fs.writeFileSync(resolve('./public/version.json'), JSON.stringify(versionConfig, null, 2));
  97. }
  98. }
  99. })
  100. ],
  101. // if prod is on, add externals
  102. externals: isProd() ? prodExternals : {}
  103. },
  104. chainWebpack: (config) => {
  105. config.resolve.alias
  106. .set('@$', resolve('src'))
  107. const svgRule = config.module.rule('svg')
  108. svgRule.uses.clear()
  109. svgRule
  110. .oneOf('inline')
  111. .resourceQuery(/inline/)
  112. .use('vue-svg-icon-loader')
  113. .loader('vue-svg-icon-loader')
  114. .end()
  115. .end()
  116. .oneOf('external')
  117. .use('file-loader')
  118. .loader('file-loader')
  119. .options({
  120. name: 'assets/[name].[hash:8].[ext]'
  121. })
  122. // if prod is on
  123. // assets require on cdn
  124. if (isProd()) {
  125. config.plugin('html').tap(args => {
  126. args[0].cdn = assetsCDN
  127. return args
  128. })
  129. }
  130. config.optimization && config.optimization.splitChunks({
  131. // ������ᅣ1�7
  132. chunks: 'all', //��ѡһ��"initial" ��ʼ����"all"(Ĭ�Ͼ���all)��"async"����̬���أ�
  133. minSize: 30000, // �γ�һ���´������С�����,ֻ�� >= minSize ��bundle�ᱻ��ֳ��ᅣ1�730000
  134. maxSize: 0, //���֮ǰ������ֵ��Ĭ��΄1�7������������
  135. minChunks: 1, //������������Ϊ2 ��ôһ����Դ���ٱ��������βſ��Ա���ֳ��ᅣ1�7
  136. maxAsyncRequests: 5, // ������ص������������
  137. maxInitialRequests: 4, // һ����������������
  138. automaticNameDelimiter: '~', // �ļ��������ӷ�
  139. name: true,
  140. cacheGroups: {
  141. // node_modulesģ��ᅣ1�7
  142. vendors: {
  143. test: /[\\/]node_modules[\\/]/,
  144. name: 'chunk-vendors',
  145. // name(module) {
  146. // const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
  147. // return `chunk.${packageName.replace('@', '')}`;
  148. // },
  149. chunks: 'all',
  150. priority: -10,
  151. },
  152. // UI�ⵥ����ᅣ1�7
  153. antDesign: {
  154. name: 'chunk-antDesign',
  155. priority: 19, // the weight needs to be larger than libs and app or it will be packaged into libs or app
  156. test: /[\\/]node_modules[\\/]_?@ant-design(.*)/
  157. },
  158. antDesignVue: {
  159. name: 'chunk-antDesignVue',
  160. priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
  161. test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/
  162. },
  163. // �����
  164. common: {
  165. name: 'chunk-common',
  166. minChunks: 2,
  167. maxSize: 1024, //���֮ǰ������ֵ��Ĭ��΄1�7������������
  168. priority: -20,
  169. reuseExistingChunk: true
  170. }
  171. }
  172. });
  173. // ���������Є1�7
  174. if (process.env.npm_config_report) {
  175. config.plugin('webpack-bundle-analyzer')
  176. .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  177. .end();
  178. }
  179. },
  180. css: {
  181. sourceMap: false,
  182. loaderOptions: {
  183. less: {
  184. modifyVars: {
  185. // less vars,customize ant design theme
  186. 'primary-color': process.env.VUE_APP_THEME_COLOR,
  187. 'link-color': process.env.VUE_APP_THEME_COLOR
  188. // 'border-radius-base': '4px'
  189. },
  190. // do not remove this line
  191. javascriptEnabled: true
  192. }
  193. }
  194. },
  195. devServer: {
  196. // development server port 8000
  197. port: 8000,
  198. disableHostCheck: true,
  199. // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
  200. proxy: {
  201. '/api': {
  202. target: 'http://192.168.0.216:8076/qpls-md',
  203. // target: 'http://p.iscm.360arrow.com/qpls-md',
  204. // ws: false,
  205. ws: true,
  206. changeOrigin: true,
  207. pathRewrite: {
  208. '^/api': ''
  209. }
  210. }
  211. },
  212. watchOptions: {
  213. ignored: [/node_modules/, /public/],
  214. }
  215. },
  216. // disable source map in production
  217. productionSourceMap: false,
  218. assetsDir: 'static',
  219. lintOnSave: undefined,
  220. // babel-loader no-ignore node_modules/*
  221. transpileDependencies: []
  222. }
  223. // preview.pro.loacg.com only do not use in your production;
  224. if (process.env.VUE_APP_PREVIEW === 'true') {
  225. console.log('VUE_APP_PREVIEW', true)
  226. // add `ThemeColorReplacer` plugin to webpack plugins
  227. vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  228. }
  229. module.exports = vueConfig