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

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 中时，应用程序功能正常，即它能够执行组件并显示它。但是，应用程序不接受上述文件夹结构。

Answer 1

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

在您的配置中，您有：

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

include 告诉 webpack 对位于 PATHS.app 内的任何文件使用 babel-loader。当它查看位于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 上做了一个简单的例子。