从零开始一个webpack+react项目

最近在做react组件化的分享，从项目中抽离组件，那么第一步自然是搭建相关的环境
本篇旨在从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境

第一步，初始化项目

npm init (注意文件名符合规范)

第二步，安装webpack、webpack-cli和webpack-dev-server，执行命令

npm install webpack webpack-dev-server webpack-cli–save-dev

第三步，当前项目中新建一个public，并在下面新建一个index页面，写上内容，在文件夹下新建一个webpack.config.js,如图

第四步，接下来在package.json中配置web服务启动命令，该命令配置在scripts中的，其命令名称为“server”，命令详情为“webpack-dev-sever --open”：

这时执行 npm run server 就可以启动起页面了

第五步，安装react和react-dom（–save 本地和正式环境都需要不要带dev）

npm install react react-dom --save

第六步，修改index页面，引入bundle.js

 <body><div id='root'></div><script  src='bundle.js'></script></body>

第七步，在public 文件下面新建一个index.jsx文件，内容如下

import React from 'react'
import { render } from 'react-dom'class Hello extends React.Component {render() {return (<p>hello react！</p>)}
}
render(<Hello/>,document.getElementById('root')
)

第八步，因为html不能直接应用jsx，而是需要webpack转换成js，让其引用，所以我们开始配置webpack，我们通过babel来转换jsx，所以安装babel

npm install babel-core babel-loader@7 babel-preset-es2015 babel-preset-react --save-dev

第九步，我们需要把jsx转换成buble.js,需要在webpack中配置入口和出口，然后通过bable处理jsx语法，打开webpack配置以下内容

entry:__dirname+"/public/index.jsx",
output:{path:__dirname+"/public",filename:'bundle.js'
}module: {rules: [{ test: /\.(jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }]    }

现在webpack是这样的

**第十步，在根目录添加一个.babelrc的文件配置去做处理，内容如下：

{"presets": ["react", "es2015"],"env": {"dev": {"plugins": [["react-transform", {"transforms": [{"transform": "react-transform-hmr","imports": ["react"],"locals": ["module"]}]}]]}}}

npm run server 就可以执行起来了，最简单的react环境就搭建好了
最终项目结构

链接地址：
网页地址

github 地址：
github

从零开始一个webpack+react项目相关推荐

一个完整react项目的目录结构
目录说明 │ .babelrc #babel配置文件 │ package-lock.json │ package.json │ README.MD │ webpack.config.js #webpa ...
从零开始搭建webpack+react开发环境
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...
webpack+react项目搭建
一.创建项目空文件夹test2: 二.创建package.json: 在空文件中打开cmd,在cmd中输入npm init,成功以后会自动创建一个package.json文件三.文件结构搭建: re ...
webpack react项目搭建一：环境
点此进入转载于:https://www.cnblogs.com/zgfa-blogs/p/6145696.html
react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
React基础篇（三）之 webpack打包项目配制
1.本篇章配置一个 webpack 打包项目 2.简述 jsx 语法配置支持 1 初始化项目使用 IDE 打开目录在命令行中初化化项目 npm init -y 然后安装 webpack cnpm ...
react打包后图片丢失_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
如何创建一个react项目
读react.js小书观后感首先需要先确定在电脑中要有node.js的文件以及npm环境 1.运行如下命令 npm install -g create-react-app 通过这条指令在电脑中加入一 ...
webpack + react 使用 eslint
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误. 在本文开始前, 我们假设您已经有一个webpack + reac ...

从零开始一个webpack+react项目

从零开始一个webpack+react项目

从零开始一个webpack+react项目相关推荐

最新文章

热门文章