我在A项目中引入了之前打包的业务组件。A项目优化打包时使用了TreeShaking

 config.optimization.splitChunks({
      chunks: 'all', // 必须三选一： 'initial" | "all"(推荐) | "async" (默认就是async)
      minSize: 30000, // 最小尺寸，30000
      minChunks: 1, // 最小 chunk ，默认1
      maxAsyncRequests: 5, // 最大异步请求数， 默认5
      maxInitialRequests: 3, // 最大初始化请求书，默认3
      automaticNameDelimiter: '~', // 打包分隔符
      name: true, // 打包后的名称，此选项可接收 function
      cacheGroups: {
        // 这里开始设置缓存的 chunks
        vendors: {
          // key 为entry中定义的 入口名称
          name: 'venders',
          chunks: 'all', // 必须三选一： 'initial' | 'all' | 'async'(默认就是async)
          test: /[\\/]node_modules[\\/]/, // 正则规则验证，若是符合就提取 chunk
          maxInitialRequests: 3, // 最大初始化请求书，默认1
          priority: -20, // 优先级
          reuseExistingChunk: true
        },
        default: {
          chunks: 'all', // 必须三选一： 'initial' | 'all' | 'async'(默认就是async)
          name: 'default',
          minChunks: 2,
          priority: -30,
          reuseExistingChunk: true
        },
        // 该组件不通用，但比较大，因此单独打包
        otcComponent: {
          chunks: 'all', // 必须三选一： 'initial' | 'all' | 'async'(默认就是async)
          test: /[\\/]node_modules[\\/]otc-comp-pc[\\/]/,
          name: 'otcComponent', // 要缓存的 分隔出来的 chunk 名称
          minSize: 30000,
          minChunks: 1,
          enforce: true,
          maxAsyncRequests: 5, // 最大异步请求数， 默认1
          maxInitialRequests: 3, // 最大初始化请求书，默认1
          priority: -10, // 优先级
          reuseExistingChunk: true
        }
      }
    })

打包后业务组件被单独提出

但是凡引入了这个业务组件的页面都报了错，
下面是打包build-test的文件报错 说是业务组件打包的报错

本地启动报错yarn dev

下面是关于业务组件打包的配置
.babelrc

  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "react-hot-loader/babel",
    // "@babel/plugin-syntax-dynamic-import",
    ["@babel/proposal-class-properties"],
    [
      "import",
      {
        "libraryName": "dpl-mobile",
        "style": "css"
      }
    ]

optimization: {
minimizer: [
new TerserJSPlugin(),
new OptimizeCSSAssetsPlugin()
]
},