安装 react 和 react-dom

npm install react react-dom

安装 webpack

npm install -D webpack
等于
npm install --save-dev webpack

安装 webpack-dev-server 用于实时刷新浏览器页面：
（目前 webpack-dev-server 已经进入维护模式，文档中推荐我们使用 webpack-serve。）

npm install -D webpack-dev-server

安装 babel-loader 用来解析 JSX 语法：

npm install -D "babel-loader@^8.0.0-beta" @babel/core @babel/preset-react

启动 webpack-dev-server：

npx webpack-dev-server --mode development --content-base ./dist --module-bind 'js=babel-loader?presets[]=@babel/preset-react'

随着配置的插件越来越多，命令行会越来越长，于是我们可以将命令行移入 webpack配置文件。
新建一个 webpack.config.js 文件：

const path = require('path')
module.exports = {
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react']
        }
      }
    ]
  }
}

这样我们就可以直接使用 npx webpack-dev-server，无需输入其他参数。

安装图片加载器：

$ npm install -D file-loader

安装加载CSS文件：

css-loader - 预处理 CSS 文件
style-loader - 将 CSS 插入到 DOM 中的 style 标签

npm install -D css-loader style-loader

安装解析 JavaScript新特性：

npm i -D @babel/plugin-proposal-class-properties

打包：
在完成项目开发后，我们需要输出文件给生产环境部署，只要执行：

npx webpack --mode production

打包的时候可能会遇到下面的提示：

The CLI moved into a separate package: webpack-cli
Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)

回复 yes 回车继续执行。
打包完后，会在项目当前目录下创建一个 dist 文件夹，里面有所有静态资源。

清理 dist：

npm i -D clean-webpack-plugin

安装自动生成 index.html，可指定内容：

npm i --save-dev html-webpack-plugin

总结

学习参考

项目（文件夹） {
    src（文件夹）{
        img （文件夹）{
            icon.jpg
        },
        index.css,
        index.js
    },
    webpack.config.js
}

package.json 全部内容：

{
  "name": "test005",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.46",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.46",
    "@babel/preset-react": "^7.0.0-beta.46",
    "babel-loader": "^8.0.0-beta",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  }
}

完整的webpack.config.js：

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

module.exports = {
    mode: 'development',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: '木子才学习webpack'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-react'],
                    plugins: ['@babel/plugin-proposal-class-properties']
                }
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

安装 webpack 以及相关 的命令：

npm install -D webpack webpack-dev-server "babel-loader@^8.0.0-beta" @babel/core @babel/preset-react file-loader css-loader style-loader @babel/plugin-proposal-class-properties clean-webpack-plugin html-webpack-plugin webpack-cli

yarn的安装方式：

yarn add -D webpack webpack-dev-server "babel-loader@^8.0.0-beta" @babel/core @babel/preset-react file-loader css-loader style-loader @babel/plugin-proposal-class-properties clean-webpack-plugin html-webpack-plugin webpack-cli

打包：

npx webpack --mode production