簡介：加載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>
