webpack - 与 webpack 捆绑时，material-ui 应该如何外部化

Question

我将material-ui从material-ui/index.js打包到material-ui.js中以便在外部提供服务。导入语句就像

import FlatButton from 'material-ui/FlatButton';

应该如何配置 webpack 以排除material-ui作为外部依赖？\我相信更改导入，因为这将有助于外部化，但不知道此后如何处理material-ui。

import material-ui from 'material-ui'

Answer 1

经过大量研究，我发现可以解决这个问题；

1. 将此方法放在 webpack.config 中的 module.exports 之上

function externalForMaterialUi(context, request, callback) {
  if (/@material-ui.+/.test(request)) {
    const name = request.replace(/^.*[\\\/]/, '')
    return callback(null, 'root MaterialUI.' + name);
  }
  callback();
}

然后你应该从 webpack 外部部分调用该方法；

externals: [
    externalForMaterialUi,
]

通过这种方式，您的 bundle 中的所有 Material-ui 包都将被排除。

另一种方法是将所有 Material 包一一包含在外部部分中；

externals: [
  {
    '@material-ui/types': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'MaterialUI',
      umd: 'MaterialUI',
    },
    '@material-ui/pickers': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'MaterialUI',
      umd: 'MaterialUI',
    },
    '@material-ui/core': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'MaterialUI',
      umd: 'MaterialUI',
    },
    '@material-ui/lab': {
      root: 'MaterialUI',
      commonjs2: 'material-ui',
      commonjs: 'material-ui',
      amd: 'MaterialUI',
      umd: 'MaterialUI',
    },

  },
],