初识react之react+webpack+es6环境配置步骤整理

今天下午在朋友的帮助下，我顺利完成了react的环境安装配置，怀着激动的心情，写下这篇文章，希望能帮助更多刚进入react学习的朋友们。接下来，就进入配置吧：

1. 从官网下载最新版本的Node.js安装
下载地址：nodeJs官网下载

2. 安装完nodejs之后,打开cmd终端输入一下命令安装webpack

npm install webpack -g

3. 创建一个根目录，目录名为react-webpack-master,可以通过以下命令创建，也可以手动新建文件夹

mkdir react-webpack-master创建目录
cd react-webpack-master/ 切换到该目录

4.使用 npm init 初始化，生成 package.json 文件

npm init 自定义创建package.json
npm init -yes 可以创建默认的package.json

5.现在我们的项目已经创建好了,接下来我们来添加依赖包及插件

（1）在项目目录下局部安装webpack

    npm install webpack --save-dev

（2）安装React,--save 命令用于将包添加至package.json 文件

    npm install react react-dom --save-dev

（3）安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。

    npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

6. 配置webpack.config.js文件

var path = require('path');
var webpack = require('webpack');
var HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './app/javascript/main.js'),
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].js'
  },
  devServer: {
    historyApiFallback: true,
    inline: true,
    port: 8181,
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_nodules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }, 
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebPackPlugin({
      filename: 'index.html',
      template: 'app/index.html',
      inject:   false,
      hash:     true,
    }),
  ]
};

注意：上面代码使用了webpack插件’html-webpack-plugin’用于对html文件打包，如果需要对html文件打包，还需安装此插件，命令是

npm install --save-dev html-webpack-plugin

entry: 指定打包的入口文件 main.js。
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称。
devServer：设置服务器端口号为 8181，端口后你可以自己设定。
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在
package.json文件内定义scripts，同时修改webpack的配置文件来达到自动刷新的效果。

7. 安装webpack-dev-server执行以下命令

npm install webpack-dev-server --save-dev

8. 在package.json文件中为scripts添加,方便使用命令

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
  },

这里的命令是webpack,如果需要压缩编译的话,将webpack改成webpack -p

9. 最终package.json文件如下

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.29.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.5.1"
  }
}

这里有一点提醒大家，package.json中name不能跟我们的模块和项目文件目录同名

10. 项目代码编写

（1）项目目录结构如下：

这里写图片描述

（2）index.html代码

<!DOCTYPE <!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>react环境</title>
</head>
<body>
  <script type="text/javascript" src="http://localhost:8181/webpack-dev-server.js"></script>
  <div id="content"></div> 
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

（3）main.js代码

let React = require('react');
let ReactDOM = require('react-dom');

var AppComponent = require('./components/Tab1');
ReactDOM.render(
  <AppComponent /> , 
  document.getElementById('content')
);

（4）Tab1.js代码

var React = require('react');

var Tab1 = React.createClass({
  render: function(){
    return (
      <div>
        React + Webpack + ES6从环境搭建到HelloWorld
      </div>
    );
  }
})

module.exports = Tab1;

11. 在根目录下执行以下命令

npm run dev

12. 在浏览器中直接访问
http://localhost:8181/
结果如下图：
这里写图片描述

13. 注意：

（1）环境安装好后，关闭命令终端想要再次启动项目，需要重新再项目根目录下运行npm run dev命令, 在提示webpack:Compiled successfully之后，说明启动成功，访问时，根据npm run dev命令执行过程中提示的Project is running at …后面的地址在浏览器中进行访问。

（2）在重启项目的时候，需要关闭上一次开启的npm run dev命令提示框，否则当再次运行npm run dev命令时会报如下错误：
这里写图片描述

最后，附上我的项目百度云下载地址：点击下载

初识react之react+webpack+es6环境配置步骤整理

猜你喜欢