使用webpack搭建React开发环境

1. 建立项目结构

-- 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', // 开发模式(development)或生产模式(production)
  entry: { // 入口文件
    index: './src/index.js'
  },
  output: { // 出口文件
    publicPath: '/', // 解决单页面应用刷新404的问题，原因还在继续研究中。。。
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist') // 确保为绝对路径
  },
  devServer: { // 配置本地服务器环境
    contentBase: path.join(__dirname, 'src'), // 目录
    host: 'localhost', // 域名
    port: 3000, // 端口号
    open: true, // 自动打开浏览器
    hot: true, // 是否启动热更新
    historyApiFallback: true, // 解决单页面应用刷新404的问题，原因还在继续研究中。。。
  },
  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 即可运行成功