React 和 Webpack在前端峡谷里可是两位扛耙子的基友了。他们相爱相杀。React官方已经为大伙提供了create-react-app
开箱即用。如果是小项目或者是想自己折腾,就需要咱们(提供一块肥皂)提供基于react的webpack配置。废话不多说,下面的教程有眼睛就能学废会。
github地址下载demo
git clone -b v0.1 https://github.com/regon-cao/react-webpack-demo.git
创建项目基础代码
- 创建文件,安装react。
mkdir react-webpack-demo
cd react-webpack-demo
mkdir public
cd public
touch index.html
cd ..
mkdir src
mkdir resources
cd resources
mkdir images
cd ..
touch index.js
npm init -y
npm i react react-dom
cd src
mkdir components
cd components
touch Hello.js
- 在components/Hello.js里添加
import React from 'react';
import reactPng from '../../resources/images/react.png';
export default class Hello extends React.Component{
constructor(props) {
super(props);
}
render() {
const {
text} = this.props;
return <div style={
{
display:'flex',justifyContent:'center'}}>
<section>
<img src={
reactPng} alt="react"/