通过Webpack搭建react

安装解析react的相关babel和插件

nmp i -D babel-loader @babel/core @babel/preset-react @babel/preset-env

进行loader相关配置

// node运行环境
// 开发环境webpack配置
const path = require('path')
// 引入html复制模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 导出
module.exports = {

  // 打包模式 development production
  mode: 'development',
  // 定义项目入口文件
  entry: {
    index: './src/index.js',
  },
  // 定义项目出口
  output: {
    // 打包生成的到的目录路径 只能使用绝对路径
    path: path.resolve('dist'),
    filename: 'js/[name].js'
  },
  // loader模块
  module: {
    rules: [
      // js兼容处理
      // npm i -D babel-loader @babel/core @babel/preset-env core-js  @babel/preset-react
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-react',
                '@babel/preset-env'
              ]
            }
          }
        ]
      }
    ]
  },
  // 插件模块
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
    })
  ],
  // web服务配置 编译放在内存中
  devServer: {
    // 指定web服务家的根路径 / => 映射的真实的绝对地址是什么
    contentBase: path.resolve(__dirname, 'dist'),
    // 监视contentBase目录下的所有文件，一旦文件有变化则就会reload重载
    watchContentBase: true,
    watchOptions: {
      // 忽略文件  提高开发阶段，打包效率
      ignored: /node_modules/
    },
    // 端口号
    port: 8080,
    // 自动打开浏览器
    open: true,
    // 不要显示启动服务器的日志信息
    clientLogLevel: 'none',
    // 除了一些基本的启动信息以外，其他的内容都不要显示
    quiet: true,
    // 如果出错，不要全屏提示  一般用于 vue项目中开启 eslint后，因为你写的不规范导致页面看不见
    overlay: false
  },
  // 打包后对于代码跟踪错误所用
  //devtool: 'source-map'
  optimization: {
    // 拆分代码
    splitChunks: {
      chunks: 'all'
    }
  },
  // 解析模块的规则
  resolve: {
    // 配置解析模块路径别名：优点简写路径，缺点路径没有提示
    alias: {
      // 定义一个@变量，可在import引入时使用
      '@': path.resolve(__dirname, '../src')
    },
    // 配置省略文件路径的后缀名称 import '@/index'
    // 如果省略，建议文件名称不要重名了
    extensions: ['.js', '.jsx']
  }

}

在打包入口文件中引入React并进行单页面应用的渲染

# main.js文件
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'

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

# App.jsx文件
import React from 'react'
class App extends React.Component {
  render() {
    return (
      <div>
        React的App项目应用
      </div>
    );
  }
}