简介：加载react和react-dom npm包，通过Webpack使用React。
- 安装Webpack
- 安装react react-dom babel等npm包
- 设置webpack.config.js，打包输出bundle.js
一、安装Webpack
mkdir demo 新建demo文件夹，在此文件夹内进行webpack本地安装。
npm init -y 初始化，生成package.json
npm install --save-dev webpack 安装成功后demo中会出现node_modules
注意:不推荐使用全局安装npm install --global webpack
二、安装需要的npm包
npm install --save react react-dom
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015
本地安装的webpack命令为
./node_modules/.bin/webpack，可以通过打开package.json，在"scripts": {}中加入"start": "webpack"，这样可以用npm start命令代替./node_modules/.bin/webpack
三、配置webpack运行环境
1. 创建文件，最终结构如下：
+--demo
| +--app
| |--index.js
| +--dist
| +--node_moudles
| --index.html
| --package.json
| --webpack.config.js
app/index.js将作为入口文件，dist用于盛放webpack打包输出的bundle.js，webpack.config.js用于配置webpack环境。
2. 设置webpack.config.js
const path =require('path');
module.exports = {
entry: "./app/index.js", //入口文件
output: {
path: path.join(__dirname,"/dist/"), // 所有输出文件的目标路径，绝对路径！
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/, //babel-loader将其他文件解析为js文件
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["es2015","react"] //babel-loader需要解析的文件
}
}
]
}
};
3. 编写index.js和index.html文件
index.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script src="dist/bundle.js"></script> /*只需引用webpack打包输出的bundle.js即可*/
</body>
</html>
四、执行webpack命令
npm start
<h1>Hello,world!<h1>
