初始化拉取，原文件名：admin-plus-webpack5

library/build/chainWebpack/banner/config.ts

@@ -0,0 +1,6 @@
+module.exports = {
+    webpackBanner:
+        ' build: Vue  Admin' +
+        ' Plus \n copyright: vue-admin-' +
+        'beautiful.com  \n time: ',
+}

library/build/chainWebpack/banner/index.ts

@@ -0,0 +1,12 @@
+const Webpack = require('webpack')
+const { webpackBanner } = require('./config.ts')
+
+module.exports = {
+    createBanner: (config) => {
+        config
+            .plugin('banner')
+            .use(Webpack.BannerPlugin, [
+                `${webpackBanner}${process.env.VUE_APP_UPDATE_TIME}`,
+            ])
+    },
+}

library/build/chainWebpack/build7z/index.ts

@@ -0,0 +1,22 @@
+const dayjs = require('dayjs')
+const { outputDir, abbreviation } = require('../../../../src/config')
+const FileManagerPlugin = require('filemanager-webpack-plugin')
+
+module.exports = {
+    createBuild7z: (config) => {
+        config.plugin('fileManager').use(FileManagerPlugin, [
+            {
+                events: {
+                    onEnd: {
+                        archive: [
+                            {
+                                source: `./${outputDir}`,
+                                destination: `./${outputDir}/${abbreviation}_${dayjs().unix()}.zip`,
+                            },
+                        ],
+                    },
+                },
+            },
+        ])
+    },
+}

library/build/chainWebpack/gzip/index.ts

@@ -0,0 +1,16 @@
+const productionGzipExtensions = ['html', 'js', 'css', 'svg']
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+module.exports = {
+    createGzip: (config) => {
+        config.plugin('compression').use(CompressionWebpackPlugin, [
+            {
+                filename: '[path][base].gz[query]',
+                algorithm: 'gzip',
+                test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
+                threshold: 8192,
+                minRatio: 0.8,
+            },
+        ])
+    },
+}

library/build/chainWebpack/imageCompression/index.ts

@@ -0,0 +1,12 @@
+module.exports = {
+    createImageCompression: (config) => {
+        config.module
+            .rule('images')
+            .use('image-webpack-loader')
+            .loader('image-webpack-loader')
+            .options({
+                bypassOnDebug: true,
+            })
+            .end()
+    },
+}

library/build/chainWebpack/index.ts

@@ -0,0 +1,43 @@
+const { createGzip } = require('./gzip/index.ts')
+const { createBanner } = require('./banner/index.ts')
+const { createBuild7z } = require('./build7z/index.ts')
+const { createSvgSprite } = require('./svgSprite/index.ts')
+const { createOptimization } = require('./optimization/index.ts')
+const { createSourceInjector } = require('./sourceInjector/index.ts')
+const { createImageCompression } = require('./imageCompression/index.ts')
+const { build7z, buildGzip, imageCompression } = require('../../../src/config')
+const path = require('path')
+
+module.exports = {
+    createChainWebpack: (env, config) => {
+        config.resolve.symlinks(true)
+        createBanner(config)
+        createSvgSprite(config)
+        if (env === 'production') {
+            if (build7z) createBuild7z(config)
+            if (buildGzip) createGzip(config)
+            if (imageCompression && process.env.VAB_VARIABLE !== 'website')
+                createImageCompression(config)
+            createOptimization(config)
+        }
+        if (env === 'development') config.devtool('cheap-module-source-map')
+        createSourceInjector(config)
+
+        // 添加一些构建优化
+        // 避免处理node_modules中已经编译过的文件
+        config.module
+            .rule('js')
+            .include.add(path.resolve('src'))
+            .add(path.resolve('library'))
+            .end()
+            .exclude.add(/node_modules/)
+            .end()
+
+        // 优化构建性能
+        config.plugin('fork-ts-checker').tap((options) => {
+            options[0].formatter = 'codeframe'
+            options[0].async = false
+            return options
+        })
+    },
+}

library/build/chainWebpack/optimization/index.ts

@@ -0,0 +1,74 @@
+const rely = require('call-' + 'rely')
+const { resolve } = require('path')
+
+module.exports = {
+    createOptimization: (config) => {
+        process.env['VUE_AP' + 'P_RELY'] = rely
+        config.performance.set('hints', false)
+        config.optimization.splitChunks({
+            automaticNameDelimiter: '-',
+            chunks: 'all',
+            cacheGroups: {
+                // 默认缓存组
+                default: {
+                    minChunks: 2,
+                    priority: -20,
+                    reuseExistingChunk: true,
+                },
+                // 公共chunk
+                common: {
+                    name: 'vab-common',
+                    minChunks: 2,
+                    priority: -10,
+                    chunks: 'initial',
+                    maxInitialRequests: 5,
+                    minSize: 0,
+                },
+                chunk: {
+                    name: 'vab-chunk',
+                    test: /[\\/]node_modules[\\/]/,
+                    minSize: 131072,
+                    maxSize: 524288,
+                    chunks: 'initial',
+                    minChunks: 2,
+                    priority: 10,
+                },
+                vue: {
+                    name: 'vue',
+                    test: /[\\/]node_modules[\\/](vue(.*)|core-js)[\\/]/,
+                    chunks: 'initial',
+                    priority: 20,
+                },
+                elementPlus: {
+                    name: 'element-plus',
+                    test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
+                    priority: 30,
+                    chunks: 'all',
+                },
+                extra: {
+                    name: 'vab-plugins',
+                    test: resolve('src/plugins'),
+                    priority: 40,
+                },
+                components: {
+                    name: 'vab-components',
+                    test: resolve('library/components'),
+                    priority: 50,
+                },
+                xlsx: {
+                    name: 'xlsx',
+                    test: /[\\/]node_modules[\\/]_?xlsx(.*)/,
+                    priority: 60,
+                },
+                echarts: {
+                    name: 'echarts',
+                    test: /[\\/]node_modules[\\/](echarts|zrender)[\\/]/,
+                    priority: 65,
+                    chunks: 'all',
+                },
+            },
+        })
+        // 配置runtimeChunk
+        config.optimization.runtimeChunk('single')
+    },
+}

library/build/chainWebpack/sourceInjector/index.ts

@@ -0,0 +1,11 @@
+const injector = require.resolve('./injector.ts')
+
+module.exports = {
+    createSourceInjector: (config) => {
+        config.module
+            .rule('vue')
+            .use('vue-filename-injector')
+            .loader(injector)
+            .after('vue-loader')
+    },
+}

library/build/chainWebpack/sourceInjector/injector.ts

@@ -0,0 +1,14 @@
+const { relative } = require('path')
+
+const blockName = 'vue-filename-injector'
+module.exports = function (content) {
+    const { rootContext, resourcePath } = this
+    const context = rootContext || process.cwd()
+    const filePath = relative(context, resourcePath).replace(/\\/g, '/')
+    content += `<${blockName}>
+                  export default function (Component) {
+                      Component.__source = ${JSON.stringify(filePath)}
+                  }
+              </${blockName}>`
+    return content
+}

library/build/chainWebpack/svgSprite/index.ts

@@ -0,0 +1,15 @@
+const { resolve } = require('path')
+
+module.exports = {
+    createSvgSprite: (config) => {
+        config.module.rule('svg').exclude.add(resolve('src/icon'))
+        config.module
+            .rule('vabIcon')
+            .test(/\.svg$/)
+            .include.add(resolve('src/icon'))
+            .end()
+            .use('svg-sprite-loader')
+            .loader('svg-sprite-loader')
+            .options({ symbolId: 'vab-icon-[name]' })
+    },
+}