如何使用SplitChunksPlugin优化node_modules中的自定义库。 （Webpack / React）

Question

我已经为我正在研究的React项目创建了一个库，并希望通过使用splitChunks选项将每个文件分成自己的块来优化该库。 在这个库中，我有2个使用lodash的实用程序文件。我使用Webpack捆绑了实用程序函数，并将node_modules拆分为自己的块。但是，当我链接该库并尝试使用实用程序函数时，我遇到了错误。 **我想让lodash留在供应商中，以保留在客户端，并防止重复的lodash库。

这是我想要的捆绑输出，但似乎不起作用：

这不是将lodash放在可以工作的束中，但是由于lodash是重复的，因此不希望这样做。

Util1

import {defaults} from 'lodash';

export default class Util1 {

    useLodash() {
       return defaults({ 'a': 1 }, { 'a': 3, 'b': 2 }); 
    }

    sayHello(){
        return 'hello';
    }
};

Util2

import {partition} from 'lodash';

export default class Util2 {

    useLodash() {
        return partition([1, 2, 3, 4], n => n % 2); 
     }

     sayBye(){
         return 'bye';
     }
};

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  entry: {
    Util1: './src/utils/Util1/index.js',
    Util2: './src/utils/Util2/index.js'
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: '[name]/index.js',
    library: 'mylibrary',
    libraryTarget:'amd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
optimization: {
  splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
  }
}
};

在纱线连接后在React项目中使用实用程序库

import React, { Component } from 'react';
import './App.css';
import Util1 from 'mylibrary/dist/Util1';


class App extends Component {

  render() {

    const u1 = new Util1(null);
    console.log('u1', u1.useLodash());
    return (
      <div><p className="example">React App</p></div>
    );
  }

}

export default App;

反应项目Webpack配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
  ]
};

我构建了包，并使用yarn link将实际的React项目指向该库，并尝试使用我的Utility函数，但收到错误：

App.js:40 Uncaught TypeError: _Util2.default is not a constructor
    at App.render (App.js:40)
    at finishClassComponent (react-dom.development.js:14741)
    at updateClassComponent (react-dom.development.js:14696)
    at beginWork (react-dom.development.js:15644)
    at performUnitOfWork (react-dom.development.js:19312)
    at workLoop (react-dom.development.js:19352)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:18578)

我也测试过

Util1.useLodash();

但是我收到错误消息

App.js:40 Uncaught TypeError: _Util2.default.useLodash is not a function
    at App.render (App.js:40)
    at finishClassComponent (react-dom.development.js:14741)
    at updateClassComponent (react-dom.development.js:14696)
    at beginWork (react-dom.development.js:15644)
    at performUnitOfWork (react-dom.development.js:19312)
    at workLoop (react-dom.development.js:19352)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:18578)

任何帮助将不胜感激，我一直把头撞在墙上，试图弄清楚为什么它不起作用。