1. 新建一个文件夹
2. 运行 npm init -y 快速初始化项目
3. 在跟目录创建src文件夹 dist文件夹
4. 在src下创建 index.html main.js

//  index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app"></div>

</body>

</html>

// main.js

import React from 'react'

import ReactDOM from 'react-dom'

// let myh2 = React.createElement('h2',{title:'123'},'我就是h2')

let {nam} = {nam:'小明1234556', sex: '男'}

// let obj0 = {age:15, ...obj}

// console.log(obj0)

// let {age} = obj0

let a = () => {

  return

}

let aa =a()

// let a = function(){

//   return 123

// }

let myh2 = <h3>我就h3{aa}{nam}</h3>

ReactDOM.render(myh2, document.querySelector('#app'))

5. 运行 `npm i webpack -D` // 基础
5. 运行 `npm i webpack-cli -D` // 可以使用 npm run dev
6. 运行 `npm i webpack-dev-server -D` // 为了起服务
7. package.js 下写 dev: "webpack-dev-server"
8. 根目录创建 webpack.config.js

const htmlWebpackPlugin = require("html-webpack-plugin")

const path = require("path")

module.exports = {

  mode: "development",

  entry: "./src/main.js",

  plugins: [

    new htmlWebpackPlugin({

      template: "./src/index.html"

    })

  ],

  devServer: {

    port:

  },

  module: { //要打包的第三方模块

    rules: [

      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }

    ]

  }

}

9. 配置 babel

　　1. 运行  npm  babel-loader @babel/core  -D  // 核心

　　2. 运行  npm  @babel/preset-env    "@babel/preset-react"  -D    

　　　

webpack 4.X 创建 react项目的更多相关文章

  1. 创建react项目的几种方法

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  2. React（一）使用脚手架创建React项目

    1.安装脚手架 现在使用较多的就是这三种脚手架工具: react-boilerplate react-redux-starter-kit create-react-app 我使用的是第三种,faceb ...

  3. 使用creata-react-app脚手架创建react项目时非常慢的问题

    创建react项目必须要有下面两个步骤 cnpm install -g create-react-app  //创建react全局变量 create-react-app my-app //创建一个re ...

  4. 创建react项目并集成eslint/prettier/commit-lint

    创建 react 项目 npx create-react-app jira-new --template typescript 如果不想使用 TS,而要用 JS 的话,则删除 -template ty ...

  5. 创建react项目

    npm搭建React项目 React官网提供最简便的方法是使用create-react-app npx create-react-app my-app cd my-app npm start 也可以自 ...

  6. webpack构建多页面react项目（webpack+typescript+react）

    目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...

  7. create-react-app创建react项目 css模块化处理

    用的css预处理器用sass,其他大同小异. 用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆): 配置sass,用的最新的CRA,webpack4 ...

  8. 用rekit创建react项目

    第一步  先进入github.com 然后搜索rekit 往下滑 1 . 先全局安装 npm install -g rekit 2 . 进入自己想要创建项目文件的目录输入 rekit create / ...

  9. create-react-app创建react项目失败！

    create-react-app my-app 用管理员运行cmd,问题依然. 打开日志,看到错误详细信息如下 32189 verbose unlock done using C:\Users\fen ...

随机推荐

  1. jeecms v9开发资料

    开发文档 . 系统架构概述 本系统核心架构为 FreeMarker+hibernate+Spirng 的 mvc 分层架构. 1.1 分层架构模型 img 1.2 数据流转模型 (前端) img . ...

  2. PAT甲级——A1071 Speech Patterns

    People often have a preference among synonyms of the same word. For example, some may prefer "t ...

  3. Git命令使用和配置

    git config --global user.name "your name" git config --global user.email "your email& ...

  4. 如何学习AxureRP Axure学习方法

    从作者最初接触的5.5版本,到5.6版本,到后来6.0的多个迭代版本,直到现在的6.5版本,AxureRP每次的版本升级都伴随着新功能的增 加,也解决了原型设计上的一些难题.这也从另一个方面诠释了“学 ...

  5. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  6. oracle中准确控制job的下次运行时间(next date)

    用过ORACLE的JOB的朋友也许都能够感觉到它的强大,和JAVA中的quartz有异曲同工之妙,可以少了很多的重复劳动:但是也会有许多问题,就是执行时间段和执行时间比较不容易确定. 这其实都是我们还 ...

  7. [转]8天玩转并行开发——第二天 Task的使用

    在我们了解Task之前,如果我们要使用多核的功能可能就会自己来开线程,然而这种线程模型在.net 4.0之后被一种称为基于 “任务的编程模型”所冲击,因为task会比thread具有更小的性能开销,不 ...

  8. 主从复制系列C

    近日接到一个故障,主从异步方式,主 crash后,从不可用,检查发现从机Read_Master_Log_Pos与Exec_Master_Log_Pos不一致,似乎还有binlog在回放中,HA在等回放 ...

  9. JZOJ100048 【NOIP2017提高A组模拟7.14】紧急撤离

    题目 题目大意 给你一个01矩阵,每次询问从一个点是否可以走到另一个点. 每次走只能往右或者往下. 思考历程 这题啊,我想的时候真的是脑洞大开-- 首先,我一眼看下去,既然要询问是否联通,那么能不能求 ...

  10. Python-基本文件处理

    目录 文件的类型 什么是文件? 文件的分类 文件的打开与关闭 文件处理的三个步骤 使用方式 爬虫 requests库的使用 文件的类型 什么是文件? 一堆.py/.txt 存储着文字信息文件, 文件的 ...