設定簡單

設定資料夾

此示例假設程式碼位於 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 與裡面的轉換程式碼並結束示例。