根目录外的 webpack 加载模块答案

【问题标题】：Webpack load module outside the root directory根目录外的 webpack 加载模块
【发布时间】：2017-07-01 14:05:49
【问题描述】：

我正在使用 Webpack 构建我的 react-redux 应用程序并遇到了一种情况：我试图从一个应用程序目录中取出一些常用组件，以便在多个反应应用程序中重用它们，但是当我尝试在应用程序目录之外加载一个组件时出现错误：

Module build failed: SyntaxError: D:/dev/gdas/WebContent/reactx/common/components/HeaderFooter/Header.js: Unexpected token (74:31)

我在 webpack.config.js 中的 babel-loader 规则如下：

{
    test: /\.jsx?$/,
    include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, '../reactx/common/components')],
    loader: 'babel-loader'
}

我的导入代码如下：

import Header from '../../../reactx/common/components/HeaderFooter/Header.js'

有什么办法可以解决这个问题吗？

【问题讨论】：

标签： reactjs webpack babel-loader

【解决方案1】：

你做的一切都是对的。只是这个文件D:/dev/gdas/WebContent/reactx/common/components/HeaderFooter/Header.js在74:31出现了SyntaxError

【讨论】：

但是Header.js在src目录下编译成功，没有任何语法错误
你能给我们看看 Header.js 文件吗？尝试删除 Webpack 中的 include 设置。
删除包含设置也尝试过，但仍然失败
我尝试为 reactx/common/components 添加 package.json，然后将其添加到应用程序的依赖项中，它可以工作