乐趣区

关于webpack:webpack4react18构建项目

jiezi

1. 开发环境 react18+webpack4
2. 电脑系统 windows11 专业版
3. 随着工作教训的积攒, 咱们会发现官网脚手架创立进去的我的项目有很多都是没有用的, 那咱们怎么本人从 0 开始创立我的项目呢？下来我来分享一下我的办法, 心愿对你有所帮忙。
4. 在这里我抉择的是 react, 那么首先咱们须要先简略的来理解一下 react。

 开发 React 必须依赖三个库：react：蕴含 react 所必须的外围代码
react-dom：react 渲染在不同平台所须要的外围代码
babel：将 jsx 转换成 React 代码的工具

4-1. react 依赖外围:

react : react 包中蕴含了 react 和 react-native 所共有的外围代码。
react-dom:
react-dom 针对 web 和 native 所实现的事件不同：web 端：react-dom 会讲 jsx 最终渲染成实在的 DOM，显示在浏览器中
native 端：react-dom 会讲 jsx 最终渲染成原生的控件（比方 Android 中的 Button，iOS 中的 UIButton）。
babel:
比方当下很多浏览器并不反对 ES6 的语法，然而的确 ES6 的语法十分的简洁和不便，咱们开发时心愿应用它。那么编写源码时咱们就能够应用 ES6 来编写，之后通过 Babel 工具，将 ES6 转成大多数浏览器都反对的 ES5 的语法。

5. 初始化我的项目:

npm init -y

6. 首先是装置:

// react 装置
npm i react react-dom -S
or npm i react@18 react-dom@18 -S
// babel 依赖装置, 具体能够看 babel 官网
npm i @babel/preset-env @babel/preset-react @babel/core babel-loader@8 -D
// webpack 装置
npm webpack@4 webpack-cli@4 webpack-dev-server html-webpack-plugin@4 -D

7. 创立 src 目录, 在 src 目录创立 index.js 和 index.html

// index.js
import React from 'react';
// 留神这里 ReactDOM 是从 client 引入
import ReactDOM from 'react-dom/client';

function App () {return (<div>Hello,Chen</div>)
}
ReactDOM.createRoot(document.getElementById('app')).render(<App />);
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chen-react-admin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

8. 创立 webpack.config.js(和 package.json 同级)

const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:'./src/index.js',
    output: {
        filename: 'index.js',// 进口文件名
        path: path.resolve(__dirname, 'dist'),// 进口门路
    },
    mode: 'development',// 模式
    module:{
        rules:[
            {test:/\.(js|jsx)$/,
                use:{loader:'babel-loader'}
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({template:'./src/index.html'})
    ]

}

9. 创立 babel.config.js(和 package.json 同级)

module.exports = {
    "presets": ["@babel/preset-env", "@babel/preset-react"],
}

10. 增加 package.json 配置:

"scripts": {"start": "webpack-dev-server --config webpack.config.js"},

11. 终端执行 npm start

// 我的项目曾经启动胜利了, 我的项目只是进行简略的配置, 前期会不断完善

12. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。

退出移动版