webb2b/vue.config.js

const { merge } = require('webpack-merge')
const { resolve } = require('path')
const moment = require('moment')
const { defineConfig } = require('@vue/cli-service')
const CompressionPlugin = require('compression-webpack-plugin')
const tsImportPluginFactory = require('ts-import-plugin')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false, // 打包取消.map
  publicPath: './',
  pages: {
    indexPath: {
      entry: process.env.VUE_APP_ROOT + 'main.ts',
      template: process.env.VUE_APP_ROOT + 'index.html',
      filename: 'index.html',
      title: process.env.VUE_APP_TITLE,
      meta: {
        revised: moment(new Date()).format('YYYYMMDDHHmmss')  // 打包生成版本号
      }
    }
  },
  css: {
    extract: true, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,
    loaderOptions: {
      postcss: {
        postcssOptions: {
          config: process.env.VUE_APP_ROOT, // 自定义 postcss.config.js 文件路径，https://webpack.docschina.org/loaders/postcss-loader/#postcss-options
        }
      }
    }
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@' + process.env.VUE_APP_ENV, resolve(__dirname, process.env.VUE_APP_ROOT))

    config.module
      .rule('ts')
      .use('ts-loader')
      .tap((options) => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              // vant 按需引入
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ],
            compilerOptions: {
              module: 'es2015'
            }
          })
        })
        return options;
      })

    config.plugin('compressionPlugin')
      .use(new CompressionPlugin({
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
      }))

    config.plugin('fork-ts-checker')
      .use(new ForkTsCheckerWebpackPlugin({
        typescript: {
          memoryLimit: 4096,
        },
      }))
  }
})