micro-main/vue.config.js at master · Nikkolast88/micro-main · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const package = require('./package.json');
const dayjs = require('dayjs');
// const assetPath = process.env.VUE_APP_ASSET_URL;
const fileName =
  package.name + '-' + package.version + '-' + dayjs().format('YYYYMMDD-HHmm');
module.exports = {
  publicPath: '/',
  productionSourceMap: process.env.NODE_ENV === 'development',
  outputDir: fileName,
  devServer: {
    port: 8080,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  css: {
    loaderOptions: {
      // 自定义主题
      scss: {
        // eslint-disable-next-line quotes
        additionalData: `@use '@/styles/variables.scss' as *;`,
      },
    },
  },
  chainWebpack: (config) => {
    // const svgRule = config.module.rule('svg');

    // svgRule.uses.clear();
    config.resolve.alias.set('@', path.resolve('./src/'));

    // svgRule
    //   .use('vue-loader')
    //   .loader('vue-loader')
    //   .end()
    //   .use('vue-svg-loader')
    //   .loader('vue-svg-loader');
    // svgRule
    //   .oneOf('component')
    //   .resourceQuery(/component/)
    //   .use('vue-loader')
    //   .loader('vue-loader')
    //   .end()
    //   .use('vue-svg-loader')
    //   .loader('vue-svg-loader')
    //   .end()
    //   .end()
    //   .oneOf('external')
    //   .use('file-loader')
    //   .loader('file-loader')
    //   .options({
    //     name: 'assets/[name].[hash:8].[ext]',
    //   });
    // config.module
    //   .rule('fonts')
    //   .use('url-loader')
    //   .loader('url-loader')
    //   .options({
    //     limit: 4096, // 小于4kb将会被打包成 base64
    //     fallback: {
    //       loader: 'file-loader',
    //       options: {
    //         name: 'fonts/[name].[hash:8].[ext]',
    //         assetPath,
    //       },
    //     },
    //   })
    //   .end();
    // config.module
    //   .rule('images')
    //   .use('url-loader')
    //   .loader('url-loader')
    //   .options({
    //     limit: 10240, // 小于4kb将会被打包成 base64
    //     fallback: {
    //       loader: 'file-loader',
    //       options: {
    //         name: 'img/[name].[hash:8].[ext]',
    //         assetPath,
    //       },
    //     },
    //   });
  },
  configureWebpack: {
    devtool: 'source-map',
    plugins: [
      require('unplugin-element-plus/webpack')({
        // options
        useSource: true,
      }),
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          bucket: {
            name: 'bucket',
            test: /[\\/]node_modules[\\/](@vue|vue-router|vuex|vue-i18n)[\\/]/,
            priority: 11,
          },
          elementPlus: {
            name: 'element-plus',
            test: /[\\/]node_modules[\\/]element-plus[\\/]/,
            priority: 10,
          },
          qiankun: {
            name: 'qiankun',
            test: /[\\/]node_modules[\\/](qiankun|single-spa)[\\/]/,
            priority: 10,
          },
        },
      },
    },
  },
};