安装解析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> ); } }