在上一篇文章中咱们用webpack与webpack-cli搭建了最简略的前端利用，通常在我的项目中咱们会用vue或者react,咱们看下如何利用咱们本人搭的工程来适配react
注释开始...
前置
首先咱们要确定，react并不是在webpack中像插件一样装置就能够间接应用，咱们须要反对jsx以及一些es6的一些比拟新的语法，在creat-react-app这个脚手架中曾经帮咱们高度封装了react我的项目的一些配置，甚至你是看不到很多的配置，比方@babel/preset-react转换jsx等。所以咱们须要晓得一个react我的项目须要哪些插件的前提条件,本文次要参考从头开始打造工具链
装置babel相干插件
npm i @babel/core @babel/cli @babel/preset-env @babel/preset-react --save其中babel/core就是能将代码进行转换，@babel/cli容许命令行编译文件，babel/preset-env与@babel/preset-react都是预设环境，把一些高级语法转换成es5
装置好相干插件后，咱们须要在根目录中创立一个.babelrc来让babel告诉那两个预设的两个插件失效
// .babelrc{ "presets": ["@babel/env", "@babel/preset-react]}接下来咱们须要装置在react中的反对的jsx，次要依赖babel-loader来编译jsx
npm i babel-loader --save-dev并且咱们须要改下webpack.config.js的loader
{ module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif|jpeg)$/, use: [ { loader: 'file-loader', options: { outputPath: 'assets', name: '[name].[ext]?[hash]' } } ] }, { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['@babel/env'] } } ] },}在react中咱们设置HMR，咱们须要联合new webpack.HotModuleReplacementPlugin(),并且在devServer中设置hot为true
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }), new miniCssExtractPlugin({ filename: 'css/[name].css' }), new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true }}残缺的配置webpack.config.js就曾经ok了
// webpack.config.jsconst path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const miniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { mode: 'development', entry: { app: './src/app.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif|jpeg)$/, use: [ { loader: 'file-loader', options: { outputPath: 'assets', name: '[name].[ext]?[hash]' } } ] }, { test: /\.(js|jsx)$/, loader: 'babel-loader', options: { presets: ['@babel/env'] } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }), new miniCssExtractPlugin({ filename: 'css/[name].css' }), new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true }};装置react、react-dom这两个外围库
npm i react react-dom --save-dev在src目录下新建一个App.jsx
// App.jsximport React, {Component} from 'react';import deepMerge from './utils/index.js';import '../src/assets/css/app.css';import image1 from '../src/assets/images/1.png';import image2 from '../src/assets/images/2.jpg';class App extends Component { constructor(props) { super(props) this.state = { text: 'hello webpack for react', name: "Maic", age: 18, publicName: 'Web技术学苑', imgSource: [image1, image2] } } render() { const { text, name, age, publicName, imgSource} = this.state; return (<> <div className="app"> <h1>{text}</h1> <div> <p>{name}</p>,<span>{age}</span>岁 <p>{publicName}</p> </div> <div> { imgSource.map(src => <img src={src} key={src} />) } </div> </div> </>) }}export default App咱们在app.js中引入App.jsx
// app.jsimport React from 'react';import { createRoot } from 'react-dom/client';import App from './App.jsx';const appDom = document.getElementById('app');const root = createRoot(appDom);root.render(<App />);咱们运行npm run server,浏览器关上localhost:8080
ok，用webpack搭建的一个本人的react利用就曾经ok了
总结
1、react须要的一些插件，@babel/core、@babel/cli、@babel/preset-env、@babel/preset-react、babel-loader
2、设置.babelrc
3、引入react、react-dom,modules中设置babel-loader编译jsx文件
4、本文code-example