React 程序开发,最重要的工作之一是:对所有 React 组件运行的 JSX 解析;另一个是:将所有模块打包成一个或者多个文件分发到浏览器中使用。
让我们来看看2款流行的 JavaScript 构建工具: Browserify 和 Webpack (我主要学习一下 Webpack)
什么是 Webpack ?
webpack 是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
我们可以直接使用 require( … ) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到。
为什么使用 Webpack?
- webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
- 能被模块化的不仅仅是 JS 。
- 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
- 扩展性强,插件机制完善,特别是支持 React 热插拔(react-hot-loader )的功能让人眼前一亮。