webpack.config 中定义的 Externals 仍然出现错误 module not found

【问题标题】：Externals defined in webpack.config still getting error module not foundwebpack.config 中定义的 Externals 仍然出现错误 module not found
【发布时间】：2017-06-08 23:08:24
【问题描述】：

我在 webpack.config 中为 material-ui 定义了外部

module.exports = [{
  entry: ...
  output:...
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react"
    },
    "material-ui": {
      commonjs: "material-ui",
      commonjs2: "material-ui"
    }
  },
  module: ...
}];

仍然是它的错误 -

无法解析模块'material-ui/IconButton'......

在我的入口js文件中，我有

import React, {Component} from "react";
import IconButton from "material-ui/IconButton";
.....
.....

【问题讨论】：

查看此相关问题。 github.com/webpack/webpack.js.org/issues/1726

标签： webpack webpack-externals

【解决方案1】：

好的，我解决了。外部需要完整的路径。

要么，

import {IconButton} from "material-ui"

或

externals: {
  "material-ui/IconButton": {
    commonjs: "material-ui/IconButton",
    ...
  }
}

会起作用。当然，第二个选项在这里是不合理的

【讨论】：

谢谢，这对我有帮助！我这里还要补充一下，字符串值区分大小写，例如vue 不起作用，但Vue 起作用。
非常感谢！使用你的方法解决了我的问题。我遇到的问题场景如下：我的组件库，组件A需要通过[npm包名]引用组件库中的另一个组件B，所以我使用externals；并且因为我是使用【npm link】进行实时开发的，所以在组件库打包过程中，当本地【lib缓存文件夹】被清空时，提示【Cannot resolve module'library name/lib/component B'】。