使用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' //查到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到
                    
                    

你可能感兴趣的:(工具,react&react,native)