React-route和Webpack快速构建一个react程序

我们先创建个空文件夹，然后初始化 package.json ,填写一些基本信息。

$ npm init

接下来我们开始安装依赖项，我的 package.json 的依赖项如下

 "devDependencies": {
    "babel": "^5.5.6",
    "babel-core": "^5.5.6",
    "babel-loader": "^5.1.4",
    "history": "^1.13.1",
    "react": "^0.13.3",
    "react-hot-loader": "^1.2.7",
    "react-router": "^0.13.3",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  } 

运行命令:

$ npm install

安装所依赖的包,会在根目录生成 node_modules的文件夹

可以直接运行$ webpack --display-error-details 命令 打包文件，不过这只有webpack的配置文件是webpack.config.js  关于这个配置文件

打开webpack.config.js，然后添加下面的代码:
var webpack = require('webpack');  
module.exports = {  
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: __dirname + '/build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]
};
这份文件大概有四个配置项 entry , output , module , plugins .
entry :指定打包的入口文件，每有一个键值对，就是一个入口文件。
output ：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称，filename里面的[name]会由entry中的键替换,例子中的 /build/bundle.js 便是生成的文件。
resolve ：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全.
 
 

  
  
module ：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会进行处理。这里我们使用了 react-hot 和 babel 。 babel-loader 是我们使用ES-6进行开发时用于生成JS文件。
  
  
最后我们生成了一个style.css仅仅做个例子，告诉我们如何引入样式文件，实际上我们可以加载诸如 sass-loader 这样的加载器。
 
 
loader 对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装。
plugins : 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js。
NoErrorsPlugin : 定义代码出现错误时的时受否自动重新加载。

指定其他的配置文件打包时  所用命令$ webpack --config XXX.js 
$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //压缩混淆脚本，这个非常非常重要！

$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了