pv-system-monorepo/packages/robot-system/vue.config.js

'use strict';
const path = require('path');
const config = require('./src/config');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, dir);
}
const name = config.title || 'Fawkes'; // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For Example, Mac: sudo npm run
const port = 9528; // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for Example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: './',
  outputDir: 'dist',
  assetsDir: '',
  lintOnSave: false,
  // lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' },
    port: port,
    open: false,
    hot: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: config.proxy
    // after: require('./mock/mock-server.js')
  },
  configureWebpack: {
    output: {
      // 微应用的包名，这里与主应用中注册的微应用名称一致
      library: `${config.appName}`,
      // 将你的 library 暴露为所有的模块定义下都可运行的方式
      libraryTarget: 'umd',
      // 按需加载相关，设置为 webpackJsonp_VueMicroApp 即可
      jsonpFunction: `webpackJsonp_${config.appName}`
    },
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    // devtool: 'source-map',
    // devtool: process.env.NODE_ENV === 'production' ? '' : 'eval-source-map',
    resolve: {
      alias: {
        '@': resolve('src'),
        'bn.js': path.resolve(process.cwd(), 'node_modules', 'bn.js'),
        sortablejs: path.resolve(process.cwd(), 'node_modules', 'sortablejs'),
        zrender: path.resolve(process.cwd(), 'node_modules', 'zrender'),
        'bpmn-js': path.resolve(process.cwd(), 'node_modules', 'bpmn-js'),
        'crypto-js': path.resolve(process.cwd(), 'node_modules', 'crypto-js')
      }
    },
    module: {}
    // optimization: {
    //   minimizer: [
    //     new TerserPlugin({
    //       //采用多进程打包
    //       parallel: 4,
    //       terserOptions: {
    //         compress: {
    //           // 去除debug、console
    //           warnings: true,
    //           drop_debugger: true,
    //           drop_console: true
    //         }
    //       }
    //     })
    //   ]
    // }
  },
  chainWebpack(config) {
    // config
    //   .plugin('webpack-bundle-analyzer')
    //   .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    //   .end()
    config.plugins.delete('preload'); // TODO: need test
    config.plugins.delete('prefetch'); // TODO: need test
    // set svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/assets/svg')).end();
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svg')) //处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end();
    // 单独处理组件库样式
    const css = config.module.rule('css').toConfig();
    const useable = { ...css.oneOf[3], test: /fawkes-lib.+\.css$/i };
    useable.use = [...useable.use];
    useable.use[0] = { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } };
    config.module.rule('css').merge({ oneOf: [useable] });
    // style - loader覆盖默认loader实现样式动态加载可控
    /**
     * const css = config.module.rule('css').toConfig()
     * const useable = { ...css.oneOf[3], test: /index_(.+)\.css$/i }
     * useable.use = [...useable.use]
     * useable.use[0] = { loader: 'style-loader', options: { injectType: 'lazySingletonStyleTag' } }
     * config.module.rule('css').merge({ oneOf: [useable] })
     */

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap((options) => {
        options.compilerOptions.preserveWhitespace = true;
        options.compilerOptions.directives = {
          html(node, directiveMeta) {
            (node.props || (node.props = [])).push({
              name: 'innerHTML',
              value: `$xss(_s(${directiveMeta.value}))`
            });
          }
        };
        return options;
      })
      .end();

    // VueFilenameInjector(config, {
    //   propName: '__source' // default
    // })

    config.when(process.env.NODE_ENV !== 'development', (config) => {
      config
        .plugin('compressionPlugin')
        .use(
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/,
            threshold: 10240,
            deleteOriginalAssets: false
          })
        )
        .end();
      // config
      //   .plugin('ScriptExtHtmlWebpackPlugin')
      //   .after('html')
      //   .use('script-ext-html-webpack-plugin', [{
      //     // `runtime` must same as runtimeChunk name. default is `runtime`
      //     inline: /runtime\..*\.js$/
      //   }])
      //   .end()
      let group = {
        chunks: 'all',
        minChunks: 1, // 文件至少被 1 个chunk 引用
        minSize: 10000,
        maxAsyncRequests: 30, // 动态导入文件最大并发请求数为 5
        maxInitialRequests: 3, // 入口文件最大并发请求数为 3
        automaticNameDelimiter: '~', // 文件名中的分隔符
        name: true, // 自动命名
        cacheGroups: {
          vendor: {
            chunks: 'initial',
            priority: 10,
            test: /[\\/]node_modules[\\/]/,
            reuseExistingChunk: true
          }
        }
      };
      config.optimization.splitChunks(group);

      console.log(config.optimization.splitChunks);
      config.optimization.runtimeChunk('single');
      // config.optimization.minimize(true) // 代码压缩
    });
  }
};