javascript - 使用 Webpack 4 对代码库进行重复数据删除

Question

目前我正在使用 Webpack 4 创建一个组件库。查看构建结果我发现一些共享组件代码是重复的，这是我的案例的一个示例：

成分

- SampleComp
- SampleComp2

在这种情况下，SampleComp正在导入SampleComp2它。

- SampleComp
-- SampleComp2

- SampleComp2

当我构建它时，在不理想SampleComp2的代码中重复，所以我查看文档。然后我按照几个示例更改了我的配置。SampleCompoptimization.splitChunks

webpack.config.js

module.exports = {
  entry: {
    SampleComp: path.resolve(__dirname, './lib/components/SampleComp/index.tsx'),
    SampleComp2: path.resolve(__dirname, './lib/components/SampleComp2/index.tsx'),
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
    libraryTarget: 'umd',
    globalObject: "typeof self !== 'undefined' ? self : this",
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          babelrc: false,
          ...babelConfig,
        },
      },
    ],
  },
  optimization: {
    minimize: false,
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5,
          minSize: 0
        },
      }
    }
  },
};

当我构建它时，它会创建一个在两个组件之间共享的公共块：

但是当我尝试通过将库链接到一些 CRA 项目来在本地尝试该组件时，我总是得到TypeError: jsonpArray.push is undefined.

我做错了吗？或者我在这里错过了一步？谢谢你。

标签： javascriptwebpackwebpack-4