在与webpack捆绑时,如何将材料外部化

时间:2016-05-08 17:17:30

标签: webpack material-ui

我将material-ui/index.js中的material-ui打包到material-ui.js中,以便在外部提供它。 import语句类似于

import FlatButton from 'material-ui/FlatButton';

如何将webpack配置为将材料ui排除为外部依赖?我认为改变导入会有助于外部化但不知道如何处理材料-ui。

import material-ui from 'material-ui'

1 个答案:

答案 0 :(得分:0)

经过大量研究,我发现可以解决此问题;

  1. 将此方法放在模块上方。在webpack.config中导出

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

然后您应该从webpack外部部分中调用该方法;

externals: [
    externalForMaterialUi,
]

通过这种方式,您包中的所有material-ui软件包都将被排除。

另一种方法是在内部外部部分中逐一包含所有材料包;

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',
    },

  },
],