webpack打包转换es6_用webpack打包react+ES6

该文章适合对react有一定认识的人阅读。

通过npm使用react，并用webpack进行打包

创建目录

创建一个根目录，目录名为：react-webpack-demo，再使用npm init -y进行初始化，生成package.json文件。

$ mkdir react-webpack-demo

$ cd react-webpack-demo/

$ npm init -y

那么此时你就会发现文件夹里面多了一个package.json文件。

添加依赖包

注：因为npm速度太慢，所以我就使用了cnpm，速度会快很多。

下载cnpm：

$ npm install -g cnpm --registry=http://r.cnpmjs.org

因为我们要使用 React, 所以我们需要先安装react和react-dom这两个依赖包，--save 命令用于将包添加至 package.json 文件的dependencies中。

$ cnpm install react react-dom --save

添加插件

我们也要安装一些 babel 插件，--save-dev是将插件添加到devDependencies中。

$ cnpm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

安装webpack以及webpa