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

构建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是一个很大的东西,建议直接查看相关的官方文档

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 7,389评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 11,921评论 7 109
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 8,902评论 0 21
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 4,738评论 3 31
  • 想静下心来认真 的开始某件事,总是要在喝掉无数鸡汤,看过无数警示之后才能下定决心。 2017年2月27日,既是让自...
    辰木子阅读 204评论 1 2
  • 日本大创美白精华 从正面印刷鉴别 大创美白精华真假真货瓶身正面的字体印刷清晰,线条偏细,而假货的字体偏粗,还有重影...
    竹子君日常分享阅读 16,857评论 0 5
  • 最爱的花之一――木槿花,也是因为看完木槿花西月锦绣这部小说之后,才不明理由的爱上它。 这是线稿,刚开始是铅笔画的,...
    于简单阅读 583评论 0 6
  • 遇困勉 早已成为离群孤雁,常为此自觉低沉。告慰以昔日豪杰发迹于市井,雄心有万丈而能端坐街头,人有其时,福祸相依,何...
    争闲阅读 248评论 0 1