创建webpack.config.js
该文件是webpack打包的配置文件。
devtool：生成source-map，使编译后的代码可读性更高，开发阶段调试使用。
source-map：在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
eval-source-map：使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
entry：是页面入口文件配置 （html文件引入唯一的js 文件）
output：对应输出项配置
path ：入口文件最终要输出到哪里，
filename：输出文件的名称，
publicPath：公共资源路径。
module：加载louder
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）。
var webpack = require('webpack');
module.exports = {
entry: './src/index.js',//入口文件
output: {
path: __dirname + '/dist',filename: '[name].js'
},module: {
rules: [{
test: /.js$/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
presets:['es2015','react','stage-2']
}
}
},{
test: /.css$/,use: {
loader: 'style-loader!css-loader',}
}]
},watch:true
};
创建文件
a). 创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app-container"></div>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html> b). 创建App.js
这是一个class，所以首字母需要大写
import React from 'react';
class App extends React.Component {
render(){ // Every react component has a render method.
return <h1>Hello World!</h1>;
}
}
export default App; c). 创建index.js
调用App.js，并加载到app-container中。
import React from "react";
import {render} from "react-dom"
import App from "./App.js"
render(
<App></App>,document.getElementById("app-container")
)
