Set up project with ReactJS, webpack, and ES2015

发表于 更新于 分类于

这篇博客以一个简单的小程序来演示用 ReactJS + ES6 + webpack 搭建一个hello world 应用的过程。

从官方文档中可知，ReactJS支持使用ES6。

本次就用ES6来编写ReactJS前端代码，并用webpack进行模块管理。

目标：创建两个组件，分别为hello.js 和 world.js，然后调用这两个组件，在页面上进行渲染。

创建项目文件夹

1
2
mkdir simple-react-webpack
cd simple-react-webpack

安装npm包

react react-dom：react相关包
babel-core babel-loader babel-preset-es2015 babel-preset-react：babel解析es6和react的相关包
webpack webpack-dev-server：webpack的相关包

1
npm install react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react  webpack webpack-dev-server --save

webpack安装完之后，会在项目根目录下生成一个webpack.config.js配置文件，会在后面用到

创建组件Hello和World

1
2
touch hello.js
touch world.js

hello.js

1
2
3
4
5
6
7
8
9
10
11
import React from 'react'
import ReactDOM from 'react-dom'

class Hello extends React.Component {
  render() {
    return (
        <div>Hello</div>
      )
  }
}
ReactDOM.render(<Hello />, document.getElementById('hello'))

world.js

1
2
3
4
5
6
7
8
9
10
11
import React from 'react'
import ReactDOM from 'react-dom'

class World extends React.Component {
  render() {
    return (
        <div>world</div>
      )
  }
}
ReactDOM.render(<World />, document.getElementById('world'))

创建webpack编译的入口文件

webpack中需要指定编译入口文件，我们在这个入口文件中引入组件Hello和World。

1
touch main.js

main.js

1
2
import Hello from './hello.js'
import World from './world.js'

配置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
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname
  },
  module: {
    loaders: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

这个配置定义了webpack的编译规则。

entry: webpack进行编译时的入口，详见文档。
output: webpack将组件编译打包后,文件的命名及位置，本例中指定为当前目录下bundle.js文件。
loaders: 此处只加载了一个loader，意为：除了/node_modules/文件夹之外的，后缀名为.js的类型文件，全部用babel-loader编译，并在编译时，加载es2015和react插件（详见babel options)。loader的详细参数见文档

新建页面并载入已经编译好的bundle.js

1
touch index.html

index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
  <title>Simple webpack react demo</title>
</head>
<body>
  <div id="hello"></div>
  <div id="world"></div>
  <script src="./bundle.js"></script>
</body>
</html>

运行

1
webpack-dev-server --progress --colors

我们用webpack-dev-server来启动服务，默认8080端口。
在浏览器中访问：http://localhost:8080/webpack-dev-server/
关于webpack-dev-server, 详见webpack-dev-server

博客中的代码我放在了github上供参考。