react webpack.config.js 入门学习

在学习react 的时候必然会用到webpack打包工具，webpack的快速入门另外一篇文章中有记录，这里只记录webpack.config.js文件，因为每个项目下都必须配置，通俗的讲，它的作用就是告诉Webpack要做什么。

一个最简单的Webpack配置文件webpack.config.js如下所示：

module.exports = {
  entry:[
    './app/main.js'
  ],
  output: {
    path: __dirname + '/assets/',
    publicPath: "/assets/",
    filename: 'bundle.js'
  }
};

　　其中：

entry：定义了打包后的入口文件，数组中的所有文件会按顺序打包。每个文件进行依赖的递归查找，直到所有相关模块都被打包。

output：定义了输出文件的位置，其中常用的参数包括：

path: 打包文件存放的绝对路径
publicPath: 网站运行时的访问路径
filename: 打包后的文件名

现在来看如何打包一个React组件。假设有如下项目文件夹结构：

- react-demo+ assets/
   - js/
     Hello.js
     entry.js
   index.html
   webpack.config.js

其中Hello.js定义了一个简单的React组件，使用ES6语法：

var React = require('react');
class Hello extends React.Component {
  render() {
    return (
      <h1>Hello {this.props.name}!</h1>
    );
  }
}

entry.js是入口文件，将一个Hello组件输出到界面：

var React = require('react');
var Hello = require('./Hello');
React.render(<Hello name="World" />, document.body);

index.html的内容如下：

<html>
<head></head>
<body>
<script src="/assets/bundle.js"></script>
</body>
</html>

在这里Hello.js和entry.js都是JSX组件语法，需要对它们进行预处理，这就要引入webpack的JSX加载器。因此在webpack.config.js 配置文件中加入如下配置：

module: {
  loaders: [
    { test: /.jsx?$/, loaders: ['jsx?harmony']}
  ]
}

加载器的作用是它能将JSX编译成JavaScript并加载为Webpack模块这样在当前目录执行webpack命令之后，在assets目录将生成bundle.js，打包了entry.js的内容。当浏览器打开当前服务器上的index.html，将显示“Hello World”。这是一个非常简单的例子，演示了如何使用Webpack来进行最简单的React组件打包。