react初始配置

下面webpack babel react 2018年最新最小化配置模板

package.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
"name": "{{NAME}}",
"version": "1.0.0",
"description": "{{DESCRIPTION}}",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "LexisNexis",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"path": "^0.12.7",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: './client/index.jsx',
output: {
path: path.resolve('dist'),
filename: 'app.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
plugins: [HtmlWebpackPluginConfig]
};

.babelrc

1
{"presets": ["env", "react"]}

client/index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App Setup</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

client/index.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import {render} from 'react-dom';
import MyComponent from './MyComponent.jsx';
class App extends React.Component {
render () {
return (
<div>
<h1>Hello React.js</h1>
<MyComponent/>
</div>
);
}
}
render(<App/>, document.getElementById('app'));

client/MyComponent.jsx

1
2
3
4
5
6
7
8
9
import React from 'react';
export default class MyComponent extends React.Component {
render () {
return (
<div>This is my component</div>
);
}
}

然后执行npm install安装必要的依赖

最后执行npm start