React环境配置 & Webpack实现热加载
一.React环境配置
React
1.1 配置前的准备
- 新建一个空文件夹,命名为项目名.点击文件夹,进入根目录下
- 在项目文件夹的根目录下开启命令行, window操作系统为在根目录下 shift + 鼠标右键, 再点击 open command window(打开window命令行工具)
- 注意: 以下的操作都是在项目文件夹的根目录下的cmd中进行操作.
- 考虑到下载包的效率, 下载的操作我这里全部使用的cnpm, 同样可以使用npm. cnpm为npm的淘宝镜像http://npm.taobao.org/
1.2 初始化 package.json 配置文件
在命令行输入以下命令
npm init
-
点击Enter之后,会出现包的一些配置参数,根据需求设置即可.
npm init
-
最后出现
Is this ok?,输入yes,就可以看见出现了一个 package.json 文件.该配置文件为包的目录文件.
npm init配置完成
1.3 安装React和React-DOM
在命令行输入以下命令
cnpm install --save react react-dom
1.4 安装babel及其依赖
在命令行输入以下命令
cnpm install babel-preset-es2015 babelify babel-preset-react babel-plugin-react-html-attrs babel-loader --save
1.5 React和Babel安装完成后的目录如下
安装完react和babel后的文件目录
- 此时可以看到,项目文件夹内有了 node_modules 这个文件夹, 且 package.json 这个文件中,也有了我们安装的 react 和 babel 的包.
二.webpack安装
2.1 在全局下安装webpack
在命令行下输入以下命令
cnpm install -g webpack
2.2 在全局下安装webpack-dev-server
1. 在命令行下输入以下命令
cnpm install -g webpack-dev-server
2. 如果安装时出现:
Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_modules\webpack-dev-server_tmp' at Error (native)报错信息,请使用windows + x 使用admin权限进行安装
2.3 在项目根目录下下安装webpack
在命令行下输入以下命令
cnpm install webpack --save
2.4 在项目根目录安装webpack-dev-server
1. 在命令行下输入以下命令
cnpm install webpack-dev-server --save
2. 如果安装时出现:
Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_modules\webpack-dev-server_tmp' at Error (native)报错信息,请使用windows + x 使用admin权限进行安装
2.5 Webpack安装完成后的目录如下
此时可以看到我们的 package.json文件中对添加了webpack和webpack-dev-server的的包.
web安装完成后的文件目录
三.实现webpack热加载(以Hello World!举例)
3.1 在根目录下新建index.html
- index.html中内容如下
<div id="example">我是主页</div>
<script src="./src/bundle.js"></script>
- 这里的
bundle.js是随后webpack打包后生成的文件. -
此时打开index.html,效果如下
未编译之前的index.html
3.2 新建index.js用作入口文件
- 在根目录下新建src文件夹
- 在src文件夹下新建js文件夹
- 在js文件夹下新建index.js文件, index.js内容如下
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById('example')
)
3.3 在根目录下新建webpack.config.js
- webpack.config.js中内容如下
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname),
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/js/index.js", //这里是入口文件地址,可根据自身的位置进行修改
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
plugins: ['react-html-attrs'], //添加组件的插件配置
}
},
//下面是使用 ant-design 的配置文件
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
output: {
path: __dirname,
filename: "./src/bundle.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
-
此时文件目录如下:
webpack配置文件
3.4 利用webpack打包
- 再命令行中输入以下命令,注意在根目录下输入
webpack
-
此时可以看到src文件夹下自动生成了bundle.js
webpack编译完成后
-
重新打开index.html, 可以看到,页面已经被渲染成Hello World!
webpack编译完成后的index.html
3.5 实现Webpack热加载
Q: 为什么要实现热加载?
如果每次在文件中进行了操作, 那么需要每次在命令行中输入webpack进行编译后才能够在浏览器中看到效果. 这也就是为什么要实现热加载的原因.webpack-dev-server会帮我们创建一个本地服务器,我们在编辑器中编辑后,就能实时的在浏览器中看到效果
- 热加载: 在命令行中输入以下命令
webpack-dev-server --inline --hot
-
此时webpack-dev-server会监听8080端口,我们在编辑器中进行的操作,就可以实时加载到localhost:8080上!
webpack热加载完成后的index.html
本例中的源文件下载地址:
- 百度网盘: https://pan.baidu.com/s/1o8Bhm3o 密码: 3ttf
- GitHub: https://github.com/Lee-Tanghui/React-init.git
