快速创建React项目并配置webpack

更新时间:2023-04-04 14:24:21 阅读：评论：0

1.快速创建react项目2.安装所需包3.根目录创建webpack.config.js文件，代码如下4.在根目录下添加文件 .babelrc，代码如下5.修改 package.json6.修改public/index.html文件7.修改src/index.js文件8.修改src/app.js文件9.修改 src/app.css文件10.在项目根目录下执行

1.快速创建react项目

npm install -g create-react-app // 全局安装create-react-app (只需要安装一次)create-react-app demo // 创建项目cd demo // 进入项目目录

注意，create react app requires node 14 or higher.需要安装高版本的node。

创建的项目目录结构

-de网上订票 取票mo // 项目名  -node_modules // 存放第三方包  -public    -favicon.ico    -index.html    -manifest.json  -src // 页面代码都写在这下面    -app.css    -app.js    -app.test.js    -index.css    -index.js //项目入口    -logo.svg    -rviceworker.js    -tuptest.js.gitignorepackage.jsonreadme.mdyarn.lock

2.安装所需包

由于package.json里包含react和react-dom，已经默认安装了，我们安装ui框架ant design即可。

npm i --save antd

安装webpack的两个基本项

npm i w高招是什么意思ebpack webpack-cli --save-dev

安装webpack

npm i -d webpack

安装webpack服务器 webpack-dev-rver，让启动更方便

npm i --save-dev w塔影楼ebpack-dev-rver

自动创建html文件 html-webpack-plugin

npm i --save-dev  html-webpack-plugin

清除无用文件 clean-webpack-plugin，将每次打包多余的文件删除

npm i --save-dev clean-webpack-plugin

样式编译loader插件

npm i --save-dev style-loader css-loader  // css相关loadernpm i --save-dev node-sass sass-loader  // scss 相关loadernpm i --save-dev file-loader url-loader // 加载其他文件，比如图片，字体

安装babel

npm i --save-dev @babel/core @babel/cli @babel/pret-env @babel/pret-react  @babel/plugin-proposal-class-propertiesnpm i --save @babel/po我喜欢的职业lyfillnpm i --save-dev babel-loader

3.根目录创建webpack.config.js文件，代码如下

const path = require('path');const webpack = require('webpack');const htmlplugin = require('html-webpack-plugin');module.exports = {    devtool: 'inline-source-map',    entry: {        index: './src/index.js'    },  保护视力桌面壁纸  output: {        filename: 'bundle.js',        path: path.resolve(__dirname, 'build')    },    module: {        rules: [{            test: /\.css$/,            u: ['style-loader', 'css-loader']        }, {            test: /\.scss$/,            u: ['style-loader', 'css-loader', 'sass-loader']        }, {            test: /\.(png|svg|jpg|gif)$/,            loader: 'url-loader',            options: {                limit: 10000,                name: 'img/[name].[hash:7].[ext]'            }        }, {            test: /\.(js|jsx)$/,            u: 'babel-loader',            exclude: /node_modules/        }]    },    devrver: {        // contentba: './build',        port: 8081, // 端口号        // inline: true,        hot: true    },    plugins: [        new webpack.hotmodulereplacementplugin(),        new htmlplugin({            template: 'public/index.html'        })    ]}

4.在根目录下添加文件 .babelrc，代码如下

{  "prets": [      "@babel/pret-env",      "@babel/pret-react"  ],  "plugins": [      "@babel/plugin-proposal-class-properties"  ]}

5.修改 package.json

"scripts": {    "start": "webpack-dev-rver --open --mode production",    "watch": "webpack --watch",    "build": "webpack --mode production",    "dev": "webpack  --mode development& webpack-dev-rver --open  --mode development",    "test": "react-scripts test",    "eject": "react-scripts eject"},

6.修改public/index.html文件

<!doctype html><html lang="en">   <head>      <meta chart="utf-8">      <title>demo</title>  </head>  <body>      <div id="root"></div>  </body></html>

7.修改src/index.js文件

import react from 'react';import reactdom from 'react-dom';import app from './app';reactdom.render(    <app />,    document.getelementbyid('root'));

8.修改src/app.js文件

import react, { component } from 'react';import './app.css';  // 引入样式文件class app extends component {  constructor(props) {    super(props);    this.state = {};  }  render() {    return (      <div classname="main">        <div>我是首页</div>      </div>    );  }}export default app;

9.修改 src/app.css文件

.main {  background: darkgray;  width: 500px;  height: 500px;  margin: 0 auto;}

10.在项目根目录下执行

npm run dev

到此这篇关于创建react项目并配置webpack的文章就介绍到这了,更多相关创建react配置webpack内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

本文发布于:2023-04-04 14:24:20，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/ccc657d0ab8d208243688ef1a2ba80cb.html

本文word下载地址：快速创建React项目并配置webpack.doc

本文 PDF 下载地址：快速创建React项目并配置webpack.pdf

上一篇：属马在今年下半年运，为什么都说今年属马的运势不好？

下一篇：返回列表

标签：文件项目根目录代码

留言与评论（共有 0 条评论）