React结合Webpack使用

June 30, 2015

3824

Todo的代码已经更新到了React0.14,React0.14分为react和react-dom两部分。如果想查看之前的代码,可以在github上切换到分支react0.13。

最近在学习React,配合Webpack使用使得开发和调试变得方便多了。这几天抽空采用React和Webpack写了一个手机单页面应用,演示地址:http://lab.crazycoder.cc/todo。本文主要记录Webpack与React配合使用的过程(采用node.js来处理)。

1、React

React组件拥有比较灵活的结构,可采用JSX来编写,代码比较简洁。同时React实现一个虚拟DOM树,用于浏览器减少重绘和重排等等。

npm install react --save

2、Webpack

webpack是一个模块加载器,特别灵活,能够像node.js解析代码中的依赖,将代码进行打包等等。

npm install -g webpack

webpack安装完后,需要配置,默认配置文件为webpack.config.js,大概配置如下

var path = require('path');

module.exports = {
  entry: [path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js', 
  },
  module: { //loaders
  }
};

module中主要是配置一些加载器如css、babel等,后面会给出详细的配置。

这时候Webpack还不能解析JSX,需要安装babel加载器。

npm install babel --save-dev

在配置文件中,将babel配置上就可以解析JSX,同时也可以解析ES6语法了。用ES6来写React瞬间逼格提升。

以前为了动态刷新浏览器的页面,会采用browser-sync。现在有了webpack神器,也可以实现同样的功能,同时也可以实现react热替换,这只需要安装webpack-dev-server,默认开启的是8080端口,在Todo案例中开发环境下的配置如下:

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
        loader: 'babel'
    },{
      test: /\.css$/,
      loader: 'style!css' //同时加载style,css加载器
    },
    {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader?limit=10000&minetype=application/font-woff"
    },
    {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "file-loader" 
    }],
    noParse: [pathToReact] //主要是用于加载压缩后的react.js
  }
};

在html文件中,还需要加入http://localhost:8080/webpack-dev-server.js这个js文件。

在package.json中scripts添加一个指令方便开发,具体如下:

"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

在命令行下,执行npm run dev即可开启http://localhost:8080。

Webpack可以通过--config指定运行时的配置文件,所以可以配置一份webpack.production.config.js用于生产环境下,主要是打包css和js。配置如下:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var node_modules_dir = path.resolve(__dirname, 'node_modules');

var config = {
  entry: {
    app: path.resolve(__dirname, 'app/main.js'),
    vendors: ['react'] 
  },
  output: {
    path: path.resolve(__dirname, 'prod', 'css'), //主要是为了使fonts在样式目录下
    filename: '../js/[name].js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: [node_modules_dir],
      loader: 'babel'
    },
    {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader")
    },
    {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader?limit=10000&minetype=application/font-woff"
    },
    {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "file-loader"
    }]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors', '../js/vendors.js'), //合并react
    new ExtractTextPlugin('all.css', {allChunks: true}) //合并css
  ]
};

module.exports = config;

以上就是Todo案例中Webpack与React的配置,剩下的就是逻辑代码的编写了。

Todo案例github地址:https://github.com/wengeek/TodoList

案例效果展示如下:

JavaScript 」相关文章

Wen's Blog

文章归档 » 文章标签 » 博主:吴文伟,Web开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接