ice-lab / icestark

:tiger: Micro Frontends solution for large application(面向大型应用的微前端解决方案),站点国内镜像:https://icestark.gitee.io
https://micro-frontends.ice.work
MIT License
2.04k stars 173 forks source link

umd产物不对 #683

Open SimonChen233 opened 1 year ago

SimonChen233 commented 1 year ago

image umd产物不对,是哪里配置有问题吗? image image

ClarkXia commented 1 year ago

应该跟工程配置相关,可以先精简你的 webpack 配置,提供出来

SimonChen233 commented 1 year ago

应该跟工程配置相关,可以先精简你的 webpack 配置,提供出来

`const path = require('path'); const { defineConfig } = require('@vue/cli-service'); const webpack = require('webpack'); const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const dayjs = require('dayjs'); const TerserPlugin = require('terser-webpack-plugin');

const resolve = (dir) => path.join(__dirname, dir); // 路径 const pkg = require('./package.json');

process.env.VUE_APP_VERSION = pkg.version;

const IS_PROD = ['production', 'testing', 'prod', 'uat'].includes(process.env.NODE_ENV); const IS_DEV = ['development', 'smartdash'].includes(process.env.NODE_ENV); console.log('env', process.env.NODE_ENV); console.log('IS_DEV', IS_DEV); const port = process.env.port || process.env.npm_config_port || 8098; // dev port

const __APP_INFO__ = { pkg, lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), };

module.exports = defineConfig({ lintOnSave: IS_DEV, //关闭eslint检查 publicPath: process.env.BASE_URL, productionSourceMap: false, css: { extract: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'smartdash' ? { ignoreOrder: true, } : false, loaderOptions: { less: { lessOptions: { javascriptEnabled: true, modifyVars: {}, }, additionalData: @import "ant-design-vue/lib/style/themes/default.less"; @import "~@/styles/variables.less"; , }, }, }, chainWebpack: (config) => { // 移除 preload 插件 config.plugins.delete('preload'); // 移除 prefetch 插件 config.plugins.delete('prefetch');

// 优化二次启动速度
config.cache({
  // 将缓存类型设置为文件系统,默认是memory
  type: 'filesystem',
  buildDependencies: {
    // 更改配置文件时,重新缓存
    config: [__filename],
  },
});
// https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single');

config
  // https://webpack.js.org/configuration/devtool/#development
  .when(IS_DEV, (config) => config.devtool('cheap-source-map'));

// 配置相关loader,支持修改,添加和替换相关的loader
config.resolve.alias.set('@', resolve('src'));
config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js');
if (process.env.DEBUG_ANTDV) {
  console.info('DEBUG_ANTDV', process.env.DEBUG_ANTDV);
  config.resolve.alias.set('ant-design-vue/es/', 'ant-design-vue/components/');
  config.resolve.alias.set('ant-design-vue/lib/', 'ant-design-vue/components/');
  config.resolve.alias.set('vue', 'ant-design-vue/node_modules/vue');
}

// config.plugin('html-index').tap((args) => {
//   args[0].title = '大数据穿透式在线监督平台';
//   return args;
// });

config.module
  .rule('css')
  .exclude.add(resolve('node_modules/ant-design-vue/dist/antd.dark.css'))
  .end();
config.module.rule('raw-css').resourceQuery(/raw/).type('asset/source');

// 忽略解析markdown文件
config.module.noParse(/\.md$/);

// config.module.rule('css').test(/\.ts$/).resourceQuery(/raw/).type('asset/source').end();
// svg rule loader
config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end();

config.module
  .rule('icons')
  .test(/\.svg$/)
  .include.add(resolve('src/assets/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'svg-icon-[name]',
  });
config.when(IS_PROD, (config) => {
  // split
  config.optimization.splitChunks({
    chunks: 'all', //指定哪些模块需要打包
    cacheGroups: {
      libs: {
        name: 'chunk-libs',
        test: /[\\/]node_modules[\\/]/,
        priority: 10,
        chunks: 'initial', // only package third parties that are initially dependent
      },
      antdv: {
        name: 'chunk-ant-design-vue', // split ant-design-vue into a single package
        priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
        test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/, // in order to adapt to cnpm
      },
      commons: {
        name: 'chunk-commons',
        test: resolve('src/components'), // can customize your rules
        minChunks: 3, // 被引用3次就提取出来
        priority: 5,
        reuseExistingChunk: true, // 表示是否使用已有的 chunk,如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了,那么将不会重新生成新的。
      },
    },
  });
  config.module
    .rule('md')
    .test(/\.md$/)
    .type('javascript/auto')
    .use('asset')
    .loader('asset')
    .options({
      limit: 100,
      esModule: false,
      generator: () => '',
    });
});

}, configureWebpack: (config) => { // 开启顶级await config.experiments = { topLevelAwait: true, }; config.resolve.fallback = { path: require.resolve('path-browserify') };

config.plugins.push(
  // 定义全局变量
  new webpack.DefinePlugin({
    __APP_INFO__: JSON.stringify(__APP_INFO__),
  }),
  // 打包速度分析
  new SpeedMeasurePlugin(),
  // use defineOptions https://github.com/sxzz/unplugin-vue-define-options
  require('unplugin-vue-define-options/webpack')(),
);
config.entry = './src/main.ts';
config.output.libraryTarget = 'umd';
config.output.library = 'webDataSupervision';
// config.output.jsonpFunction = `webpackJsonp_webDataSupervision`;
console.log('===========config.optimization===========', config.optimization);
if (IS_PROD) {
  // terser-webpack-plugin (https://webpack.docschina.org/plugins/terser-webpack-plugin/);
  const TerserPluginIndex = config.optimization.minimizer.findIndex(
    (n) => n.__pluginName === 'terser',
  );
  console.log('TerserPluginIndex', TerserPluginIndex);
  config.optimization.minimizer[TerserPluginIndex] = new TerserPlugin({
    terserOptions: {
      warnings: false,
      format: {
        comments: false,
      },
      compress: {
        drop_debugger: true, // 注释console
        drop_console: true,
        pure_funcs: ['console.log'], // 移除console
      },
    },
    extractComments: false, // 是否将注释提取到一个单独的文件中
    parallel: true, // 是否并⾏打包
  });
}

}, devServer: { port, client: { progress: true, }, headers: { 'Access-Control-Allow-Origin': '*', }, host: 'localhost', proxy: { '^/proxy/obei-data-hub': { target: 'https://apiprotest.obei.com.cn/obei-gateway/obei-data-hub/', changeOrigin: true, logLevel: 'debug', ws: true, pathRewrite: { '^/proxy/obei-data-hub': '', }, }, '^/proxy': { target: 'https://dpadev.obei.com.cn/obei-gateway/obei-data-supervision/', changeOrigin: true, logLevel: 'debug', ws: true, pathRewrite: { '^/proxy': '', }, }, '^/ws-api': { target: 'wss://nest-api.buqiyuan.site', // target: 'http://localhost:7002', changeOrigin: true, //是否允许跨域 wss: true, logLevel: 'debug', }, }, }, }); `