1、初始化项目
mkdir react-pro
cd react-pro
npm init
创建一个空目录,cd到该目录下,然后执行初始化项目命令。
会生成一个package.json
文件。
2、安装react核心库
官方文档:
https://facebook.github.io/react/docs/installation.html
npm install --save react react-dom webpack
因我们需要webpack来构建,所以一下给安装了。
3、配置基本的项目目录结构
4、安装html-webpack-plugin插件
html-webpack-plugin插件官网:
https://github.com/jantimon/html-webpack-plugin
html-webpack-plugin
可以帮助我们对html模板文件进行输出和生成,并自动把我们需要引入的js文件给插入到html模板当中。
npm install html-webpack-plugin --save-dev
5、创建webpack配置文件webpack.config.js
,让刚才安装的这些东西融合在一起。
var config = {
// 入口
entry: {
index: "./src/js/index"
},
// 输出
output: {
filename: "[name].js",
path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
},
}
module.exports = config;
没有dist
文件夹就手动创建一个。
上面完成了基本的webpack配置,我们先来测试一把,到终端执行:
webpack
果然 dist
目录下生成了一个index.js
的文件,这就是weppack打包编译之后的文件。
6、刚才webpack的配置只是简单的处理了js文件,还没有处理html模板文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
// 入口
entry: {
index: "./src/js/index"
},
// 输出
output: {
filename: "[name].js",
path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/pages/index.html", // 模板路径
filename: "index.html" // 编译之后新的模板
})
]
}
module.exports = config;
到这里,我们再次执行webpack打包命令:webpack
。会在dist
文件夹会多生成一个index.html
文件。并且在这个index.html文件中,会自动引入index.js文件。
7、上面我们完成了webpack简单演示,下面我们要进入正题。看看react如何搞?
在src/js/index.js
文件中:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
这是一个React的简单示例,但是这里会报错,那是因为还不能识别其中的语法。
接下来我们要用到babel
来处理这个问题,可以查看babel官网文档:
https://babeljs.io
npm install --save-dev babel-preset-react babel-loader babel-core
在根目录创建babel配置文件.babelrc
,写上如下内容:
{
"presets": ["react"]
}
然后babel还要和webpack融合,在webpack.config.js文件中:
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
8、最后再来打包就没问题了
#根目录执行webpack打包命令
webpack
最后我们在来看看webpack.config.js文件内容:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
// 入口
entry: {
index: "./src/js/index"
},
// 输出
output: {
filename: "[name].js",
path: __dirname + "/dist" // 把编译之后的文件输出到这个目录下
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/pages/index.html", // 模板路径
filename: "index.html", // 编译之后新的模板
chunks: ["index"]
})
],
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
// webpack打包的时候排除
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
}
module.exports = config;
src/pages/index.html文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>