Webpack 2 迁移中断了 ES6 模块导入答案

【问题标题】：Webpack 2 migration breaks ES6 module importsWebpack 2 迁移中断了 ES6 模块导入
【发布时间】：2016-12-02 19:20:29
【问题描述】：

所以我最近在一个 React 应用上升级到了 webpack 2。它直接开箱即用，除了版本号外，我无需更改任何内容！太好了。

但是，现在我正试图让它为我捆绑我的 ES6 模块（导入、导出等），而 babel 和 webpack 似乎不能很好地结合在一起。

我为实现这一目标所做的唯一更改是更改我的.babelrc：

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": ["transform-object-rest-spread"],
}

到这里：

{
  "presets": [["es2015", {"modules": false}], "stage-1", "react"],
  "plugins": ["transform-object-rest-spread"],
}

Webpack 仍然将它捆绑起来而不会引发错误，但是当我打开应用程序时，我得到了可怕的 "Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)."

堆栈跟踪将我带回到我的应用程序的第一行 (ReactDOM.render(...)

据我所知，当您尝试使用import { Component } from './component.js' 而不是import Component from './component.js' 导入另一个组件的默认导出时，通常会出现此错误。我不明白为什么会出现这种情况，因为我知道我的代码可以与 babel 一起使用。

有什么建议吗？

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

似乎["es2015", {"modules": false}] 不是必需的并且是导致错误的原因。

通过保留我的 babelrc 并在我的 webpack 配置中添加以下插件来获得所需的行为：new webpack.optimize.CommonsChunkPlugin({...}) 和 new HtmlWebpackPlugin({...})。

还根据this great tutorial 进行了一些其他配置更改，这还可以帮助您单独捆绑供应商模块，并向您展示如何根据您的react-router 路由将代码分成块。

【讨论】：