vue.config.js

let path = require('path')
const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const { getThemeColors, modifyVars } = require('./src/utils/themeUtil')
const { resolveCss } = require('./src/utils/theme-color-replacer-extend')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// esm版本集成monaco
// const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// 汉化monaco使用
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
// const MonacoLocalesPlugin = require('monaco-editor-nls')

const productionGzipExtensions = ['js', 'css']
const isProd = process.env.NODE_ENV === 'production'

const assetsCDN = {
  // webpack build externals
  //externals为不打包的文件
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    nprogress: 'NProgress',
    clipboard: 'ClipboardJS',
    '@antv/data-set': 'DataSet',
    'js-cookie': 'Cookies'
  },
  css: [
  ],
  //使用 CDN 方式引入资源库
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
    '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
    '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
    '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
    '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js'
  ]
}

module.exports = {
  devServer: {
    // proxy: {
    //   '/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
    //     target: process.env.VUE_APP_API_BASE_URL,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': ''
    //     }
    //   }
    // }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "./src/theme/theme.less")],
    }
  },
  configureWebpack: config => {
    config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"]
    config.performance = {
      hints: false
    }
    config.module
      .rules.push({
        test: /\.js/,
        enforce: 'pre',
        // eslint-disable-next-line no-useless-escape
        include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
        use: MonacoWebpackPlugin.loader
      })
    // config.plugins.push(new MonacoLocalesPlugin(
    //   {
    //     //设置支持的语言
    //     languages: ["es", "zh-cn"],
    //     //默认语言
    //     defaultLanguage: "zh-cn",
    //     //打印不匹配的文本
    //     logUnmatched: false,
    //     //自定义文本翻译
    //     mapLanguages: { "zh-cn": { "Peek References": "查找引用", "Go to Symbol...": "跳到变量位置", "Command Palette": "命令面板0" } }
    //   }
    // ))
    config.plugins.push(new MonacoWebpackPlugin())
    config.plugins.push(
      new ThemeColorReplacer({
        fileName: 'css/theme-colors-[contenthash:8].css',
        matchColors: getThemeColors(),
        injectCss: true,
        resolveCss
      })
    )
    // Ignore all locale files of moment.js
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
    // 生产环境下将资源压缩成gzip格式
    if (isProd) {
      // add `CompressionWebpack` plugin to webpack plugins
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
    }
    // if prod, add externals
    if (isProd) {
      config.externals = assetsCDN.externals
    }
  },
  chainWebpack: config => {
    // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
    if (isProd) {
      config.plugin('optimize-css')
        .tap(args => {
          args[0].cssnanoOptions.preset[1].colormin = false
          return args
        })
    }
    // 生产环境下使用CDN
    if (isProd) {
      config.plugin('html')
        .tap(args => {
          args[0].cdn = assetsCDN
          return args
        })
    }

    //https://www.jianshu.com/p/e018f8b890bd
    //vue 脚手架默认开启了 preload 与 prefetch，当项目很大时，会增加首屏加载时间。

    // compass


    // 移除 preload(预载) 插件
    config.plugins.delete('preload')
    // 移除 prefetch(预取) 插件
    config.plugins.delete('prefetch')

    //抽离 css 支持按需加载
    let miniCssExtractPlugin = new MiniCssExtractPlugin({
      filename: 'assets/[name].[hash:8].css',
      chunkFilename: 'assets/[name].[hash:8].css'
    })
    config.plugin('extract-css').use(miniCssExtractPlugin)

    // 展示可视化文件占用信息，上线之前注释掉
    // config
    //   .plugin('webpack-bundle-analyzer')
    //   .use(BundleAnalyzerPlugin)



    // compass

    //清除 console.log   安装npm install terser-webpack-plugin --save-dev
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })

    //图片压缩
    // config.module
    // .rule('images')
    // .use('imageWebpackLoader')
    // .loader('image-webpack-loader')
    // .options({
    //   disable: process.env.NODE_ENV === 'development', // 开发环境下禁止压缩
    //   gifsicle: {
    //     interlaced: false
    //   }
    // })
    config.module
    .rule("vue")
    .use("vue-loader")
    .loader("vue-loader")
    .tap(options => {
        options.compilerOptions.directives = {
            html(node, directiveMeta) {
                (node.props || (node.props = [])).push({
                    name: "innerHTML",
                    value: `xss(_s(${directiveMeta.value}))`
                });
            }
        };
        return options;
    });
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: modifyVars(),
          javascriptEnabled: true
        }
      }
    }
  },
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false
}