1. 建立項目結(jié)構(gòu)

-- your project
  |-- dist(項目輸出打包目錄)
  |-- src(項目源代碼)
    |-- index.js
  |-- webpack.config.js
  |-- package.json

2. 安裝項目依賴

// 安裝 react
npm install react react-dom --save-dev
// 安裝 webpack
npm install webpack --save
npm install webpack-cli --save
npm install webpack-dev-server --save
// 安裝 babel
npm install @babel/core --save
npm install @babel/preset-env --save
npm install @babel/preset-react --save
// 安裝支持 jsx 的插件
npm install babel-loader --save
// 安裝 webpack 插件
npm install html-webpack-plugin --save
npm install clean-webpack-plugin --save

3. 建立 .babelrc 文件

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

4. 配置 webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  mode: 'development', // 開發(fā)模式(development)或生產(chǎn)模式(production)
  entry: { // 入口文件
    index: './src/index.js'
  },
  output: { // 出口文件
    publicPath: '/', // 解決單頁面應用刷新404的問題，原因還在繼續(xù)研究中。。。
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist') // 確保為絕對路徑
  },
  devServer: { // 配置本地服務器環(huán)境
    contentBase: path.join(__dirname, 'src'), // 目錄
    host: 'localhost', // 域名
    port: 3000, // 端口號
    open: true, // 自動打開瀏覽器
    hot: true, // 是否啟動熱更新
    historyApiFallback: true, // 解決單頁面應用刷新404的問題，原因還在繼續(xù)研究中。。。
  },
  module: { // 配置 loader
    rules: [
      {
        test: /\.(js|jsx)/,
        use: ['babel-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [ // 配置插件
    new webpack.HotModuleReplacementPlugin(), // 與熱更新一起使用
    new HtmlWebpackPlugin({ // 打包后的模板插件配置
      filename: 'index.html', // 生成 HTML 文件的名稱
      chunks: ['index'], // 引入 js 文件的名稱(就是 entry 中的 key 值)
      minify: { // 壓縮頁面資源
        collapseWhitespace: true, // 壓縮空格
      },
      template: path.resolve(__dirname, 'src/index.html'), // 模板的路徑
      hash: true // 消除緩存
    }),
    new CleanWebpackPlugin(), // 每次打包前清除上一次打包的文件
  ]
}

5. 修改 package.json 文件

"scripts": {
  "dev": "webpack-dev-server",
  "build": "webpack"
}

6. 在 src 文件夾下的 index.js 文件中輸入如下代碼

import React from 'react'
import ReactDOM from 'react-dom'

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

ReactDOM.render(
  <App></App>,
  document.getElementById('root')
);

7. 在根目錄中啟動命令行輸入 npm run dev 即可運行成功