如何使用Webpack5徒手创建React项目

未完待续。。。。

准备工作，需要的依赖包

// react react-dom
npm install react

// webpack三剑客
npm i --save-dev webpack webpack-dev-server webpack-cli

// 面向babel编程，别忘记html模板
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin

css loader

npm install --save-dev style-loader css-loader

webpack.config.js配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundlefile.js'
  },
  module: {
    rules: [
      {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader'
         }
      },
      {
         test: /\.css$/,
         use: [
            'style-loader',
            'css-loader'
         ]
      }
   ]
  },
  plugins: [
    new HtmlWebpackPlugin({
       template: './src/index.html'
    })
  ]
}

.babelrc文件配置

{
  "presets": [
    "@babel/preset-env",
    "@babel/react"
  ]
}

在src文件夹下新建index.js入口文件

在src文件夹下新建html模板文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Send it react</title>
  <meta name="viewport" content="width=device-width, initial-   scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>
  <div id="App"></div>
</body>
</html>

新建一个react入口文件
src/js/components

import React from 'react'
const App = () => {
  return(
     <div>
        <h1>Hello React</h1>
     </div>
   )
}
export default App;

package.json配置如下，版本不一定要跟我一样
npm run dev/npm run start

  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production --config ./webpack.config.js --progress --color "
  },
  "devDependencies": {
    "@babel/core": "^7.22.6",
    "@babel/plugin-transform-runtime": "^7.22.6",
    "@babel/preset-env": "^7.22.6",
    "@babel/preset-react": "^7.22.5",
    "babel-loader": "^9.1.2",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^5.5.3",
    "raw-loader": "^2.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },

如何使用Webpack5徒手创建React项目

月疋儿

引用和评论

前端微服务跨域配置解决办法，devServer为例

原生electron起步-从零到一完成构建和打包

vue3使用百度地图

Taro 源码揭秘：4. 每次 npm run dev:weapp 开发小程序，build 编译打包是如何实现的？

一起来动手实现一个ai聊天对话

一文掌握vue3自定义指令

像编写文档一样轻松构建你的官网！-VitePress保姆级教程