设置简单

设置文件夹

此示例假设代码位于 src/中，输出将放入 out/中。因此，文件夹结构应该类似于

example/
|-- src/
|   |-- index.js
|   `-- ...
|-- out/
`-- package.json

设置包

假设设置 npm 环境，我们首先需要设置 babel 以便将 React 代码转换为符合 es5 的代码。

$npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

上面的命令将指示 npm 安装核心 babel 库以及用于 webpack 的加载器模块。我们还安装了 es6 并为 babel 做出反应预设，以了解 JSX 和 es6 模块代码。 （有关预设的更多信息可以在这里找到 Babel 预设 ）

$npm i -D webpack

此命令将安装 webpack 作为开发依赖项。 （ 我是安装的简写， -D 是 –save-dev 的简写）

你可能还想安装任何其他 webpack 包（例如其他加载器或 webpack-dev-server 扩展）

最后，我们需要实际的反应代码

$npm i -D react react-dom

设置 webpack

使用依赖项设置，我们需要一个 webpack.config.js 文件来告诉 webpack 要做什么

简单的 webpack.config.js：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

该文件告诉 webpack 从 index.js 文件开始（假设在 src /中）并将其转换为 out 目录中的单个 bundle.js 文件。

module 块告诉 webpack 测试遇到正则表达式的所有文件，如果它们匹配，将调用指定的加载器。 （在这种情况下为 babel-loader）此外，exclude 正则表达式告诉 webpack 忽略 node_modules 文件夹中所有模块的这个特殊加载器，这有助于加快转换过程。最后，query 选项告诉 webpack 要传递给 babel 的参数，并用于传递我们之前安装的预设。

测试设置

现在剩下的就是创建 src/index.js 文件并尝试打包应用程序

SRC / index.js：

'use strict'

import React from 'react'
import { render } from 'react-dom'

const App = () => {
  return <h1>Hello world!</h1>
}

render(
  <App />,
  document. getElementById('app')
)

这个文件通常会将一个简单的 <h1>Hello world!</h1> Header 渲染到带有 id’app’的 html 标签中，但是现在它应该足以将代码转换一次。

$./node_modules/.bin/webpack . 将执行本地安装的 webpack 版本（如果使用 -g 全局安装 webpack，请使用 $webpack）

这应该创建文件 out/bundle.js 与里面的转换代码并结束示例。