使用Webpack构建React应用

前面写过一遍《使用gulp+Browserify构建React应用》，本文来看看更强大的构建工具— —Webpack。先来看看webpack强大之处介绍
1、将css、图片以及其他资源打包到同一个包中
2、在打包之前对文件进行预处理(less、coffee、jsx等)
3、 根据入口文件的不同把你的包拆分成多个包
4、支持开发环境的特殊标志位
5、支持模块代码“热”替换
6、支持异步加载
  Webpack不仅帮助你打包所有的Javascript文件，还拥有其他应用需要的资源。这样设计可以让你能创建一个自动包含所有类型依赖的组件。由于可以自动包含所有的依赖，组件也变得更加方便移植。更妙的是，随着应用不断地开发并修改，当你移除某个组件的时候，它的所有依赖也会自动被移除。这意味这不会再有未被使用的css或图片遗留在代码目录中。
  本文主要是编写一个React开发的webpack构建包基础框架，后续编写React简单小例子，构建吧命令、index.html均无需改变，只需要关注./app/jsx目录中编写组件的jsx代码即可。
源码地址：https://github.com/mqy1023/react-basejs/tree/master/src/dev-base/webpack

一、React项目结构

/app
   /jsx
   index.html
package.json
webpack.config.js
.babelrc

二、webpack脚本

• 1、创建package.json管理node包信息文件：npm init;

• 2、package.json中scripts脚本

  "scripts": {
      "start": "webpack-dev-server",//执行`npm start` 相当于执行`webpack-dev-server`命令启动服务器
      "prod": "webpack -p"//执行`npm run prod` 相当于执行`webpack -p`打包命令
  }

• 3、react相关库

  npm install react --save;//react核心库
  npm install react-dom --save;//react操作dom库

• 4、Babel- -编译JSX

  npm install --save-dev babel-core;//babel核心
  npm install --save-dev babel-loader;    //webpack中babel编译器
  npm install --save-dev babel-preset-react;  //react的JSX编译成js

• 5、html-webpack-plugin - - 修改html文件插件
  npm install --save-dev html-webpack-plugin;

• 6、webpack相关库
  全局安装webpack：npm install webpack -g

  npm install --save-dev webpack; //webpack核心
  npm install --save-dev webpack-dev-server;  //webpack服务器

  ---

• 7、.babelrc - - 设置webpack的loader加载器(babel编译器)规则

  {
    "presets": [
      "react"
    ]
  }

• 8、webpack.config.js - - webpack配置

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html', //指定html模板目录路径
  filename: 'index.html',    //新建文件名
  inject: 'body' //<script>[output的filename(index_bundle.js)]</script>查到body中,另可插head
});

module.exports = {
  entry: [
    './app/js/App.jsx'    //App.js是主入口jsx
  ],
  output: {  //指定输出目录和输出文件名index_bundle.js
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [ //正则：以jsx结尾；排除node_modules目录；babel加载器
      {test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

三、网页index.html

./app/index.html
//html最轻量化，<script>都没有。
//webpack配置中html-webpack-plugin插件自动插入转换并拼接后的js到<script>中

四、在./app/jsx目录下编写React的jsx

其中模块化管理jsx，只需要在webpack.config.js的entry配置指定入口的App.jsx

五、使用

1、npm install
2、构建命令

webpack     //执行一次开发时的编译
webpack -p      //执行一次生成环境的编译（压缩）
webpack -w  //在开发时持续监控增量编译（很快）

//因为在package.json配置了script
npm start //相当于执行`webpack-dev-server`命令启动服务器
npm run prod //相当于执行`webpack -p`打包命令

---

总结

index.html文件和webpack构建包命令不变，每次开发React时，
只需要在./app/jsx目录下编写React组件的jsx代码，主入口jsx为App.jsx即可