配置React webpack.config.js

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

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

1. 它解决您的项目文件夹中的文件夹client并保存到SRC_DIR和BUILD_DIR。

2. 它告诉webpack寻找一个名为在解决client文件夹client-app.js文件从步骤1

3. 它告诉webpack输出束的Javascript到第1步中的文件名bundle.js的client文件夹。

4. 它告诉webpack寻找任何进口或需要.js和.jsx文件在client-app.js开始你的项目文件夹内（而来自node_modules除非明确导入排除文件），并使用babel-loader与预设编译它们装入包代码从es2015 react到es5。