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

1. 点击Enter之后,会出现包的一些配置参数,根据需求设置即可.

   
   
   

   npm init

2. 最后出现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中内容如下

我是主页

• 这里的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(
    
Hello World!
,
    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

---

本例中的源文件下载地址:

1. 百度网盘: https://pan.baidu.com/s/1o8Bhm3o 密码: 3ttf
2. GitHub: https://github.com/Lee-Tanghui/React-init.git