由于有前文的铺垫,我们这里不多废话,直接进入webpack的配置部分,让项目能够跑起来。先声明下,这篇文章会以从零搭建前端开发环境(零)——基础篇:2.webpack生产与开发环境配置最后的项目结构为基础,即已经完成了基本项目的webpack配置。这时你就会发现之前花费的精力是值得的,有了好的基础,一切都是那么的自然而然,记住一句话:“慢慢来比较快”。
1、安装
$ npm i -S react react-dom
在从零搭建前端开发环境(零)——基础篇:2.webpack生产与开发环境配置安装的模块基础上再安装几个
$ npm i -D babel-preset-react
2、修改配置
修改webpack.base.js
// code
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
//code
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'src': path.resolve(root, 'src'),
'util': path.resolve(root, 'src/util'),
'assets': path.resolve(root, 'src/assets'),
'components': path.resolve(root, 'src/components')
},
},
//code
修改.babelrc
{
"presets": [
["env",{ "modules": false }],
"stage-2",
"react"
]
}
3、修改代码
新建src/components/HelloWorld/index.jsx
import React from 'react';
import { strReverse } from '@util';
import logo from '@assets/logo.jpg';
const STR_INPUT = 'Hello World';
const STR_HOLDER = 'The result will be here...';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
result: STR_HOLDER
}
}
onChangeResult(result) {
this.setState({
result
});
}
render() {
return <div>
<img src={logo} alt="logo" />
<h1>{STR_INPUT}</h1>
<button onClick={() => this.onChangeResult(strReverse(STR_INPUT))}>Show the reverse of "{STR_INPUT}"</button>
<button onClick={() => this.onChangeResult(STR_HOLDER)}>Do reset</button>
<p>{this.state.result}</p>
</div>
}
}
修改src/index.js为src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import HelloWorld from '@components/HelloWorld';
ReactDOM.render(
<HelloWorld />,
document.getElementById('app')
);
运行prod和dev试试,是不是也没那么难~除了业务代码之外,项目的配置简直简单到爆,有木有~