react.js使用webpack搭配环境的入门教程

本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记

如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令

rush:bash;"> npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称 cd my-app/ //进入my-app目录 npm start //运行项目

现在打开 http://localhost:3000/ 就能看到初始界面

我不大愿意使用官方自带这个脚手架,是因为它的webpack配置太复杂,我比较愚钝看不大懂,还望有大神能研究透彻分享一下。

要如何create-react-app内部的webpack配置文件解压出来?

rush:bash;"> npm run eject

代码

每次看教程我都喜欢先把项目跑起来,然后再一句一句代码地去了解。如果你也是:

rush:bash;"> git clone https://github.com/lingjiawen/HelloReact.git cd HelloReact/ npm install npm run dev

一、创建项目结构

新建一个文件夹,命名为HelloReact

顺口提一下,我用的IDE是Sublime

在该文件夹内这样组织你的项目结构:

rush:plain;"> |--app //项目组件 |--components //组件结构 |---Hello.jsx |--main.js //入口文件 |--build //项目build文件 |--index.html //索引html |--.babelrc //babel转码工具配置文件

|--package.json //npm说明文件,可以理解为包管理文件
|--webpack.config.js //webpack配置文件

在build/index.html中拷贝以下代码

rush:xhtml;"> <Meta charset="UTF-8"> ReactDemo1