Question

我有代码库，文件夹结构如下所示：

|- build\
|- node_modules\
|- apps\
|--- app_no_1\
|----- index.js
|- src\
|--- modules\
|----- form-login\
|------- Form.jsx
|- package.json
|- webpack.config.js
....

app_no_1\文件夹包含其React应用程序的索引文件。但是，模块位于src\文件夹中。当我将组件从src目录导入应用程序时，出现错误：

bundle.js:41448 Uncaught Error: Module parse failed: Unexpected token (15:18)
You may need an appropriate loader to handle this file type.
| // );

是否有一些我缺少的webpack配置选项，这是访问应用程序文件夹外的文件所必需的？我的webpack.config.js是这样的：

const path = require('path');
const merge = require('merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'apps'),
  appAthenaTrader: path.join(__dirname, 'apps/athenaTrader'),
  appAthenaFinancier: path.join(__dirname, 'apps/athenaFinancier'),
  build: path.join(__dirname, 'build'),
  modules: path.join(__dirname, 'src/modules')
};

const common = {
  output: {
    path: PATHS.build,
    publicPath: '/',
    filename: 'bundle.js'
  },
  resolve: {
    alias: {
      modules: PATHS.modules
    },
    extensions: ['.js', '.jsx', '.json'],
    modules: [PATHS.modules, 'node_modules']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: PATHS.app,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        include: PATHS.app,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(jpg|png)$/,
        include: PATHS.app,
        use: {
          loader: 'file-loader?name=[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Satoshi Ltd - Athena'
    })
  ]
};

const generateEntry = env => {
  const entryVariable = {
    entry: {
      app: ''
    }
  };
  if (env.app === 'athena-trader') {
    entryVariable.entry.app = PATHS.appAthenaTrader;
  } else if (env.app === 'athena-financier') {
    entryVariable.entry.app = PATHS.appAthenaFinancier;
    // } else ...
  }
  return entryVariable;
};

const devServer = {
  devServer: {
    stats: 'errors-only',
    host: process.env.HOST || 'localhost',
    port: process.env.PORT || 3000
  },
  devtool: 'inline-source-map'
};

const generateConfig = env => {
  const entry = generateEntry(env);
  if (env.profile === 'development') {
    return merge(common, entry, devServer);
  }
  return merge(common, entry);
};

module.exports = generateConfig(process.env);

我应该注意，当文件夹进入app_no_1时，应用程序运行正常，即它能够执行组件＆amp;显示它。但是，应用程序不接受上述文件夹结构。

Answer 1

问题在于你的babel-loader配置。 Webpack抱怨说它不知道如何解析你的文件（我假设它是JSX）。

在您的配置中，您有：

module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: PATHS.app,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      },
      // ...
    ]

include告诉webpack对位于babel-loader内的所有文件使用PATHS.app。当它查看位于PATHS.modules的文件时，它不会使用babel-loader。这是当webpack显示Module parse failed错误时。

要解决此问题，您可以将include值更新为以下内容：

include: [PATHS.app, PATHS.modules]

另一种方法是使用exclude代替include。

// assuming you want to only ignore node_modules
exclude: /node_modules/

我还在Github上做了一个准确的例子。

Webpack - 文件夹访问外部应用程序文件夹

1 个答案: