美文网首页
使用webpack + react 构建应用的基本流程与注意事项

使用webpack + react 构建应用的基本流程与注意事项

作者: xiongxiong109 | 来源:发表于2016-07-15 14:30 被阅读0次

构建react应用,使用es6风格写法是最合适的。所以要使用babel进行编译,而且由于react的jsx语法自成一套,所以解析标准要包含es2015和react

webpack部分


模块依赖:

babel模块:

    babel-core
    babel-loader
    babel-preset-es2015
    babel-preset-react

css、less、img url 加载模块:

    css-loader
    less-loader
    style-loader
    url-loader

react模块:

   react
   react-dom
   react-router  // react路由
   react-addons-css-transition-group // 动画过渡

webpack中的实用插件:

1.js代码压缩优化插件: webpack.optimize.UglifyJsPlugin
在开发模式下使用react的时候, react会给出很多友好的提示,以及给出各种调试信息,而且文件没有压缩,十分巨大,而使用其他的方式进行压缩时,react-dom还会给出警告,所以可以直接使用webpack的插件进行压缩

  // js代码压缩优化
var UglifyJs = new webpack.optimize.UglifyJsPlugin({

    output: {
        comments: false,
    },
    compress: {
        warnings: false
    }

});

2.css代码单独打包出去:

  // css单独打包插件
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  1. 定义开发环境,让开发环境与node环境关联起来:
    // 开启生产环境模式, 启动时要通过NODE_ENV=production来启动
    var Define = new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
      }
    });

备注: 这样关联起来之后, 在发布生产环境代码的时候,就应该这样调用:

  NODE_ENV=production webpack

react部分


react推崇组件化开发, 所以可以把页面中的一切都组件化起来,由于配合了webpack分析模块依赖,所以不仅js可以模块化,css甚至img也可以模块化,把一个功能所需的视图、css、js、img、单独管理起来,就可以很好地做成一个组件了。

所以我的项目目录里有个widget文件夹(也可以叫component), 文件夹的结构如下:

    widget
       --- 导航组件(NavBox)
             |导航组件jsx
             |导航组件less
       --- 轮播组件(SlideBox)
             |轮播组件jsx
             |轮播组件less

然后是使用react-router
react-router是一个很大的东西,建议直接查看相关的官方文档

相关文章

网友评论

      本文标题:使用webpack + react 构建应用的基本流程与注意事项

      本文链接:https://www.haomeiwen.com/subject/quyyjttx.html