Webpack+React+ES6开发模式入门指南

React无疑是今年最火的前端框架，github上的star直逼30,000，基于React的React Native的star也直逼20,000。有了React，组件化似乎不再步履蹒跚，有了React Native，前端的边界似乎广阔无边。而Webpack凭借它异步加载和可分离打包等优秀的特性，走在取代Grunt和Gulp的路上。而面向未来的ES6，模块化的支持似乎已成定局。

我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来。

这篇文章就给还没走在这条路上的前端一个入门的指南。

文章导读：

　　一、先把例子跑起来玩玩（setup your background）

　　二、理解React

　　三、webpack入门

　　四、现在开始探索&&扩展阅读

一、先把例子跑起来（setup your background）

可以fork我在github上的[react-webpack]demo项目，也可以从头开始：

1.1 我们在名为react-webpack的新项目中要做的第一件事，就是新建一个package.json文件，它看起来应该是这个样子的：

View Code
1.2 第二步就是创建我们webpack的配置文件webpack.config.js：

View Code
1.3 同时我们还需要在入口文件index.html中引入程序跑起来的一些必要的东西，虽然他的作用看起来没有那么明显：

View Code
注意，这里面引用的bundle.js文件非常重要，他是我们打包后的入口文件，不引入它程序是跑不起来的。

app.js文件是程序的入口文件，我们在这里处理简单的类似路由的逻辑：

View Code
相信你已经看到了ES6的身影，没错，在这里，我们写ES6的代码,只要新建js文件，我们就在里面写ES6的代码。

我们在入口文件上放上了一个连接，分离我们最熟悉的helloworld代码。也是为了方便以后我们写其他的例子可以有单独的文件，易于管理和查看，就像下面看到的项目目录一样，一个js文件就是一个小例子的代码。

hello.js:

View Code
1.4 执行：

1 npm install

再加上一些必要的文件入口，我们的项目现在看起来应该是这样的：

View Code
它通常放在根目录下，他自己也是一个标准的Commonjs模块，我们可能已经看到了require，module.exports这样的标志性关键词。

它的主要的配置参数有：

- entry：

1 entry: [
2       'webpack/hot/only-dev-server',
3       "./js/app.js"
4     ],

它定义了打包的入口文件，数组中的文件会按顺序进行，并且它会自行解决依赖问题。

在这里其实我们还定义了Webpack开发服务器，webpack-dev-server，我们可以在package.json文件中看到：

1 "scripts": {
2     "start": "webpack-dev-server --hot --progress --colors",
3     "build": "webpack --progress --colors"
4   },

这也是我们npm start启动了服务器之后访问http://localhost:8080/webpack-dev-server/可以访问到页面的原因。

- output：

1 output: {
2         path: './build',
3         filename: "bundle.js"
4     },

它定义了输出文件的的位置，包括路径，文件名，还可能有运行时的访问路径（publicPath）参数。

- module：

webpack将所有的资源都看做是模块，而模块就需要加载器：

1 module: {
2         loaders: [
3             { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
4             { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
5             { test: /\.css$/, loader: "style!css" },
6             {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
7         ]
8     },

对于不同的文件，我们可以自行配置使用不同的加载器。也可以自行实现合心意的加载器。

在这里我们配置了babel-loader，可以让我们在js文件中随心所欲的开始写ES6规范的代码。

Webpack的加载器之间可以进行串联，一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，从而运行时可以通过style标签将其应用到最终的浏览器环境。

- resolve：

1  resolve:{
2       extensions:['','.js','.json']
3   },

Webpack 是使用类似 Browserify 的方式在本地按目录对依赖进行查找。

resolve属性中的extensions数组中用于配置程序可以自行补全哪些后缀。比如说我们要require一个common.js文件，添加了这个配置我们只要写：require('common')；就可以了。

- plugin:

1 plugins: [
2      new webpack.NoErrorsPlugin()
3  ]

我们可以在plugin参数中配置我们需要用到的各种各样的插件。比如我们想将多个文件分开打包，可能会用到:

1 {
2   entry: { a: "./a", b: "./b" },
3   output: { filename: "[name].js" },
4   plugins: [ new webpack.CommonsChunkPlugin("init.js") ]
5 }

四、现在开始探索&&扩展阅读

面向未来的ES6，模块化的支持似乎已成定局。我们通过从webpack中的配置即可马上开始编写ES6的代码。

通过打造这样的工作环境，我们可以同时使用多种面向未来的新技术开始新的探索。

现在就开始探索吧！不要等到未来到来，却发现自己还没做好准备。

扩展阅读：

[基于webpack的前端工程化探索]

[webpack入门]

[webpack-howto]

[webpack home]

-转载