Question

我在网上找到了这个代码来创建一个webpack用于反应..究竟发生了什么？我需要这样的东西能够正确使用反应吗？我很困惑。

const path = require('path');

const SRC_DIR = path.resolve(__dirname, 'client');
const BUILD_DIR = path.resolve(__dirname, 'client');

module.exports = {
  entry: path.resolve(SRC_DIR, 'client-app.js'),
  output: {
    filename: 'bundle.js',
    path: BUILD_DIR
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015', 'react'] }
        }],
      }
    ]
  }
}

为什么要求我添加一些上下文？我正在尝试添加更多详细信息，以便发布此问题

Answer 1

上面的代码执行以下操作：

它会解析项目文件夹中的client文件夹，并将其保存到SRC_DIR和BUILD_DIR。
它告诉webpack在步骤1中的已解析client-app.js文件夹中查找名为client的文件。
它告诉webpack将包Javascript从步骤1输出到client文件夹，文件名为bundle.js。
它告诉webpack在项目文件夹中的.js处查找任何导入或必需的.jsx和client-app.js文件（同时从node_modules中排除文件，除非明确导入）并使用带有预设的babel-loader将它们加载到包中，以将代码从es2015 react编译为es5。

配置React webpack.config.js

1 个答案: