ToB企服应用市场:ToB评测及商务社交产业平台

标题: React 18 + Babel 7 + Webpack 5 开发情况搭建 [打印本页]

作者: 北冰洋以北 时间: 2024-7-17 08:58
标题: React 18 + Babel 7 + Webpack 5 开发情况搭建
一、底子开发情况搭建

1. 新建项目目录

返回目录

mkdir example #创建项目目录
cd example #进入项目目录
npm init -y #生成 package.jsom

复制代码

example # 项目目录
├── public # 静态公用目录
│ └── index.html # html模板
├── src # 源代码目录
│ ├── pages # 页面目录
│ │ └── home # 主页目录
│ │ └── index.js # 主页代码
│ └── index.js # React 入口代码
└── package.json

复制代码

public/index.html：html 模版”
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. 
6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
7. <meta name="theme-color" content="#000000" />
8. 
9. <meta http-equiv="Pragma" content="no-cache">
10. <meta http-equiv="Cache-Control" content="no-cache">
11. <meta http-equiv="Expires" content="0">
12. 
13. <title><%= htmlWebpackPlugin.options.title %></title>
14. </head>
15. <body>
16. 
17. <div id="root"></div>
18. </body>
19. </html>
复制代码
src/pages/home/index.js：首页
1. import React from 'react'; //引入 react
3. function Home() {
4. return (<div>Hello, World!</div>)
5. }
7. export default Home;
复制代码
src/index.js：React 的入口文件
1. 'use strict';
2. import React from 'react'; //引入 react
3. import { createRoot } from 'react-dom/client';
4. import Home from '../src/pages/home'; //引入本项目的首页
6. //把首页渲染到 html 模版的 react 根节点上
7. const domNode = document.getElementById('root');
8. const root = createRoot(domNode);
9. root.render(<Home />);
复制代码

3. 安装 React 18 + Babel 7 + Webpack 5

返回目录

# 安装 React主程序 dom操作路由
npm i -S react react-dom react-router-dom
# 安装babel
npm i -D @babel/core @babel/preset-env @babel/preset-react
# 安装 webpack主程序支持命令行本地开发用web服务处理html插件
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
# 安装 webpack加载器
$ npm i -D babel-loader css-loader style-loader

复制代码

4. 配置 Babel 和 Webpack

返回目录

更新项目目录l
1. example # 项目目录
2. ├── public # 静态公用目录
3. │ └── index.html # html模板
4. ├── src # 源代码目录
5. │ ├── pages # 页面目录
6. │ │ └── home # 主页目录
7. │ │ └── index.js # 主页代码
8. │ └── index.js # React 入口代码
9. ├── .babelrc # babel配置文件新增
10. ├── webpack # webpack配置目录新增
11. │ └── dev.js # 开发环境配置文件新增
12. └── package.json
复制代码
新建文件 .babelrc
1. {
2. "plugins": ["@babel/syntax-dynamic-import"],
3. "presets": [
4. [
5. "@babel/preset-env",
6. {
7. "modules": false
8. }
9. ],
10. "@babel/preset-react"
11. ]
12. }
复制代码
新建 webpack/dev.js：开发情况配置文件
1. // 引用库
2. const path = require('path');
3. const webpack = require('webpack');
5. // 引入插件
6. const HtmlWebpackPlugin = require('html-webpack-plugin');
7. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
9. // 路径方法
10. const resolve = pathname => path.resolve(__dirname, `../${pathname}`);
11. const stylesHandler = MiniCssExtractPlugin.loader;
13. module.exports = {
14. mode: 'development',
15. entry: resolve('src/index.js'),
16. output: {
17. clean: true,
18. filename: 'js/[name].[hash:5].bundle.js', //出口文件
19. path: resolve('dist') //输出路径
20. },
21. devServer: {
22. open: true,
23. host: 'localhost',
24. },
25. plugins: [
26. new HtmlWebpackPlugin({
27. title: 'HTML页面标题', //替换index.html的title标签内容
28. template: resolve('public/index.html'), //html模版的位置
29. }),
30. new MiniCssExtractPlugin({
31. filename: 'css/[name].[contenthash:5].css',
32. chunkFilename: 'css/[id].[contenthash:5]\'.css',
33. ignoreOrder: false
34. }),
35. ],
36. module: {
37. rules: [
38. {
39. test: /\.(js|jsx)$/i,
40. loader: 'babel-loader',
41. },
42. {
43. test: /\.css$/i,
44. use: [stylesHandler, 'css-loader'],
45. },
46. {
47. test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
48. type: 'asset',
49. },
50. ],
51. },
52. };
复制代码
留意：loader 的加载顺序是从右往左，从下往上

5. 调试/构建项目

返回目录

修改 package.jsom，在 “scripts” 下添加运行和构建下令
1. {
2. "scripts": {
3. "dev": "webpack serve -c webpack/dev.js",
4. "build:dev": "webpack -c webpack/dev.js"
5. }
6. }
复制代码
用 npm 执行脚本下令
1. npm run dev # 调试项目
2. npm run build # 构建项目
复制代码

二、扩展项目支持的本领（待增补）

返回目录
1. JS 扩展（待增补）

返回目录
2. CSS 扩展（待增补）

返回目录
3. 热更新（待增补）

返回目录
4. 按需加载（待增补）

返回目录
5. 第三方库的使用（待增补）

返回目录
三、代码尺度化（待增补）

返回目录
1. 代码校验 ESLint（待增补）

返回目录
四、代码发布（待增补）

1. 生产情况 webpack 配置（待增补）

返回目录

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)