webpack+react+es2015轻松环境搭建，配置，运行项目

时间 2019-11-11

标签 webpack+react+es2015 webpack react 轻松环境搭建配置运行项目栏目 React 繁體版

原文原文链接

简介：html

webpack：是近期最火的一款模块加载器兼打包工具，它能把各类资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都做为模块来使用和处理。前端

react：如今最热门的前端框架，毫无疑问是 React 。node

es2015：ECMAScript 6。react

以上是她们的基本定义，想一想能将她们结合在一块儿开发咱们的项目是多么的激动人心啊。固然在正式开发以前咱们也有不少准备工做须要作好，这也多是对新手最棘手的问题。下面咱们就直接进入正题吧。webpack

环境搭建：nginx

首选咱们需下载安装Node.js,下载地址：https://nodejs.org/en/ （注意：为了能支持es2015请下载4.0以上版本）git
安装了node以后咱们还须要npm也就是包管理器，固然新的node已经集成了npm的。因此此步骤能够跳过了es6
有了npm后，win+r而后输入cmd打开，而后输入命令：github
```
npm install webpack -g
```
执行命令后个人webpack就全局安装好了，这里提醒一下，在项目文件中咱们还须要将webpack写入package.json(局部安装)web

项目建立：

在D盘建立咱们的项目文件“reactPro”，目录结构以下：

在cmd中定位项目地址，执行命令：
```
cd D:\reactPro
```
```
D:
```
定位完成后，咱们利用npm生成package.json文件，执行命令：
```
npm init
```
上面命令执行完成以后咱们就生成了一个node项目，接下来就能够安装咱们的node模块了

首选安装webpack，执行命令：
```
npm install webpack --save-dev
```
而后安装webpack须要的加载器，执行命令：

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

加载器这里应该是很重要的一步了，若是没有这几个加载器咱们的jsx语法，和es2015语法就会报错（ps：网上不少教程都没有重点说起这几个加载器）
好了有了这几个重要的加载器来编译咱们的代码以后，咱们还要安装react模块，这样才能开发咱们react应用。安装react输入以下命令：
```
npm install react react-dom --save-dev
```

文件配置&运行：

前面咱们已经建立好了咱们的项目文件也安装完了必要的模块，环境已经搭建好了，如今就是万事具有只欠东风啦。
接下来，咱们开始配置webpack开发的webpack.config.js文件配置，经过配置这个文件咱们告诉webpack如何编译咱们的代码，话很少说直接上代码：

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }

            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

你们可能发现了‘webpack/hot/dev-server‘这句话，没错这就是咱们的webpack-dev-server，她容许咱们能够把本地项目跑在像nginx那样的web服务器上，更重要的是咱们能够在package.json文件内定义scripts，同时修改webpack的配置文件来达到相似BrowserSync（即文件修改能被监听，并自动刷新浏览器）的效果！
安装webpack-dev-server执行：

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

在package.json文件中为scripts添加：

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

最后咱们的package.json代码是这样的：

{
  "name": "reactpro1",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "babel-node tools/run bundle",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "author": "jx",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react": "^15.0.2",
    "react-dom": "^15.1.0",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  },
  "description": ""
}

这里有一点提醒你们，package.json中name不能跟咱们的模块和项目文件目录同名
index.html变成这样:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>

最后咱们这样执行（ps:这一步能够先跳过，写完咱们的项目代码后再来执行）：
```
npm run dev
```

react&es2015代码编写：

全部东西都齐全了，如今咱们就能够开始咱们的愉悦的代码编写了
根据webpack.config.js的配置结合咱们的文件目录结构，首先是main.js:

let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/productBox.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

这里的let就是es2015的东西了，关于更多的如class，module之类的语法能够去这个网站学习，地址：http://es6.ruanyifeng.com/#README
在main.js里咱们引入了'./components/productBox.js'这个模块，productBox.js代码以下：

var React = require('react');
var ProductBox;
ProductBox = React.createClass({
    render: function () {
        return (
            <div className="productBox">
                hello react&es2015&webpack!
            </div>
        );
    }
});

module.exports = ProductBox;

到这里，简单的功能代码就完成了，当运行项目后根据webpack.config.js的配置回来build目录下生成bundlie.js文件，咱们只须要在build目录下的index.html文件中引入bundle.js就完成咱们的整个项目测试代码了.index.html以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>

代码开发完成后就要运行咱们的项目了，在cmd中执行：
```
npm run dev
```
等待编译完成，打开浏览器输入http://localhost:8080/index.html
至此咱们的测试项目大功告成！
github项目地址：https://github.com/jx2011/webpack-react-es6.git

总结：

因为时间缘由，这篇文章只能重点指出环境搭建和一些注意事项，一些概念性的东西并无深刻讲解，但愿你们谅解，也各位大神指出错误和不足，鄙人定虚心接受。
最后感谢你们支持，后面若是有空，会再发表gulp雪碧图的相关教程，有兴趣能够关注一下。