快速创建React项目并配置webpack

2024-10-20 07:21:05

1.快速创建React项目
2.安装所需包
3.根目录创建webpack.config.js文件，代码如下
4.在根目录下添加文件 .babelrc，代码如下
5.修改 package.json
6.修改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。

创建的项目目录结构

-Demo // 项目名
  -node_modules // 存放第三方包
  -public
    -favicon.ico
    -index.html
    -manifest.json
  -src // 页面代码都写在这下面
    -App.css
    -App.js
    -App.test.js
    -index.css
    -index.js //项目入口
    -logo.svg
    -serviceWorker.js
    -setupTest.js
.gitignore
package.json
README.md
yarn.lock

2.安装所需包

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

npm i --save antd

安装webpack的两个基本项

npm i webpack webpack-cli --save-dev

安装webpack

npm i -D webpack

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

npm i --save-dev webpack-dev-server

自动创建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相关loader
npm i --save-dev node-sass sass-loader  // scss 相关loader
npm i --save-dev file-loader url-loader // 加载其他文件，比如图片，字体

安装babel

npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react  @babel/plugin-proposal-class-properties
npm i --save @babel/polyfill
npm 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$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            use: ['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)$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    devServer: {
        // contentBase: './build',
        port: 8081, // 端口号
        // inline: true,
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlPlugin({
            template: 'public/index.html'
        })
    ]
}

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

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

5.修改 package.json

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

6.修改public/index.html文件

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

npx create-react-app xxx创建项目报错的解决办法

手头有一台大学时代的Windows电脑,它此前没有装过create-react-app,只装了node环境.版本信息:node -> 10.16.3,npm -> 6.9.0.前几日闲的无事想给它装个React,结果失败了,报了错,所以有了下面这出. 安装过程根据React官方文档(上图)可以发现,此时并不需要安装create-react-app工具,只要你的node >= 8.10 && npm >= 5.6,就可以直接使用npx create-react-ap
从零搭建Webpack5-react脚手架的实现步骤(附源码)

目录 webpack5 正式开始搭建指南开始搭建完成了依赖的准备工作,开始搭建项目编写webpack.dev.js开发配置开始编写webpack.prod.js生产配置编写scripts命令配置代码质量管控流程单元测试 webpack5 近期终于有时间和精力专注于公司技术基础建设了,于是一开始,将公司的Saas系统改造成了微前端模式,解决了历史遗留的一部分问题接着,想着webpack5已经发布这么久了,该在生产环境用起来了,也顺势想推动微前端.webpack5.vite在业内的
react以create-react-app为基础创建项目

什么是create-react-app create-react-app是一个js库,使用它能够很方便地建立react项目,免去了建立react项目时配置webpack.调试服务器.运行脚本等麻烦,你只需要使用这个库,便可以一键完成react项目的创建初始化项目首先,要先利用create-react-app创建一个react项目,可参考https://github.com/facebookincubator/create-react-app 注:用"[ ]"包裹的都是可自定义的内容,
使用webpack5从0到1搭建一个react项目的实现步骤

前言在这之前,每开始一个新项目我都是使用现有的脚手架,这非常便于快速地启动一个新项目,而且通用的脚手架通常考虑地更加全面,也有利于项目的稳定开发:不过对于一个小项目,根据需求自己搭建可能会更好,一方面小项目不需要脚手架那么丰富的功能,另一方面可以提高对项目的掌控度以方便后期的扩展. 这篇文章是在实践中总结的,具有实操性,读者可跟着一步步进行搭建,中间我会穿插一些原理,当然因为笔者的能力有限,不会特别深入. 预备知识熟悉Javascript && HTML && CSS
使用 React 和 Threejs 创建一个VR全景项目的过程详解

最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目实现的是加载一张 2:1 的720全景分享一下我的创建过程一.搭建框架并安装需要的插件 npx create-react-app parano // 创建一个 React 项目 npm install -S typescript // 安装 typescript,这个是类型辅助插件,与全景项目关系不大 npm install -S @types/three // 安装 typescript 支持的
快速创建React项目并配置webpack

目录 1.快速创建React项目 2.安装所需包 3.根目录创建webpack.config.js文件,代码如下 4.在根目录下添加文件 .babelrc,代码如下 5.修改 package.json 6.修改public/index.html文件 7.修改src/index.js文件 8.修改src/App.js文件 9.修改 src/App.css文件 10.在项目根目录下执行 1.快速创建React项目 npm install -g create-react-app // 全局安装crea
详解IDEA用maven创建springMVC项目和配置

本文介绍了IDEA用maven创建springMVC项目和配置,分享给大家,具体如下: 工具准备:IDEA2016.3 Java jdk 1.8 1.DEA创建项目新建一个maven project,并且选择webapp原型. 然后点击next 这里的GroupId和ArtifactID随意填写,但是ArtifactID最好和你的项目一名一样然后next 为了快一点创建,我们添加一个属性值,如图中亮的所示,点右边的加号,name=archetypeCatalog value=internal.
react项目优化配置的操作详解

目录优化-配置CDN 优化-路由懒加载使用步骤代码实现查看效果优化-配置CDN 通过 craco 来修改 webpack 配置,从而实现 CDN 优化 yarn add @craco/craco //或者 npm install @craco/craco --save 在项目根目录新建craco.config.js文件 // 添加自定义对于webpack的配置 const path = require('path') const { whenProd, getPlugin, plug
如何用Vite构建工具快速创建Vue项目

目录和Webpack相比,Vite具有以下特点 Vite构建Vue项目构建过程可能会发生的一些问题总结和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择
详解用Spring Boot零配置快速创建web项目

一.Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 本文是一个springboot入门级的helloworld程序. 二.maven安装与配置下载地址:http://maven.apache
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动
JavaWeb 入门篇:创建Web项目,Idea配置tomcat

目录创建一个maven项目项目结构添加框架在pom.xml 中添加如下依赖配置tomcat 添加完如下图: 解决导入包问题: 启动测试: 总结创建一个maven项目项目结构添加框架在pom.xml 中添加如下依赖 dependencies> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <versi
React+Electron快速创建并打包成桌面应用的实例代码

目录一.创建react项目二.安装Electron 三.配置文件四.打包Electron桌面应用一.创建react项目首先使用creat-react-app脚手架来创建一个react项目 # 安装 create-react-app 命令,如果已将安装请忽略 npm install -g create-react-app # 创建 react项目 create-react-app react-electron # 启动项目( create-react-app 真的超级方便啊) cd re
详解使用create-react-app快速构建React开发环境

最近在折腾react开发,总结一个react环境搭建的教程,写得比较细碎,基本上就是自己的搭建步骤了,希望能够帮助到有需要的小伙伴. 常用的脚手架 react-boilerplate react-redux-starter-kit create-react-app(git上关注量最大) 使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-re