WebPack在React项目架构中的应用实践
2016-12-07 10:22
761 查看
前言
说起WebPack的发展历程,不由想起了一那句“千里马常有,而伯乐不成有的”的名言,相信很多人都听说过Grunt, Gulp 这样的架构工具,但是却很少有人涉及应用过Webpack, 但是由于React的技术框架的风靡一时,webpack的地位以及应用度得到了很大的提升,这不得不感谢Facebook的架构。对此,我也谈一下webpack在React项目中的应用实践,究竟为何要用这样一个技术架构。
什么是webpack
首先,webpack是一款前端的架构工具,也是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 或者import(XXX)的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass), webpack拥有很多的模块加载器(loader)来处理这些问题。
官网是 http://webpack.github.io/
webpack的优势何在
webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。支持多种文件资源,比如js, coffee等等。
配置简单,开发便捷,比如打包、压缩混淆、图片转base64等。
扩展性强,插件机制完善,特别是支持 React 热加载插件( react-hot-loader )
安装
我们常规直接使用 npm 的形式来安装:$ npm install webpack -g
常规项目还是把依赖写入 package.json 包去更人性化:
$ npm init $ npm install webpack --save-dev
配置
每个webpack的工程都会有一个配置文件,就比如grunt中的gruntfile.js, gulp中的gulpfile.js。webpack中的文件名字叫做webpack.config.js, 这个文件需要在项目根目录创建,默认的执行指令为‘webpack’。
简单配置:
module.exports = { entry: './index.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [{ test: /\.css$/, loaders: ['style-loader', 'css-loader'] }] } };
这里解释一下几个属性的作用:
entry:用户配置整个项目工程文件的入口点。
output:用于配置解析编译后生成压缩文件路径。
module: 主要定义项目中的解析器例如css, jsx, babel等等,这个很想gulp,grunt的task,这里比较好的一点是我们不需要require这些loader,但是需要额外安装的。 而gulp是需要的。
可以配置多个entry:
var path = require('path'); var config = { entry: { admin: './admin/index.js', consumer: './consumer/index.js' }, output: { path: path.join(__dirname, 'dist'), publicPath: '/dist/', filename: '[name].bundle.js' } }; module.exports = config;
上面代码中的path, __dirname为webpack特有的方法属性用于指定路径。
常用loader的分析
对于webpack来讲,可贵之处在于提供了大量可用的loader处理我们的资源文件,Loader 是支持链式执行的,如处理 sass 文件的 loader,可以由 sass-loader、css-loader、style-loader 组成,由 compiler 对其由右向左执行,第一个 Loader 将会拿到需处理的原内容,上一个 Loader 处理后的结果回传给下一个接着处理,最后的 Loader 将处理后的结果以 String 或 Buffer 的形式返回给 compiler。如下常用几项:
预处理器
css-loader 处理css中路径引用等问题style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
loaders之 js处理
babel-loaderjsx-loader
loaders: [ {test: /\.js$/, loader: "babel", exclude: /node_modules/}, {test: /\.jsx$/, loader: "jsx-loader"} {test: /.css$/, loader: 'style!css'} ]
image-loader
loader安装:sudo install image-webpack-loader --save-dev
config代码:
module: { loaders: [ { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file?hash=sha512&digest=hex&name=img/[hash].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' ] } ] },
url-loader
sudo npm install url-loader --save-dev
url-loader的功能和image-loader功能比较类似,只是url-loader可以k控制小于某个大小的图片转成dataurl。
plugin的应用
webpack的plugin可以帮助开发者处理压缩混淆等代码上的问题,使用也是相当方便,具体我们看一下代码:plugins: [ //单独生成html文件 new HtmlWebpackPlugin({ filename: '../index.html',//生成的html及存放路径,相对于path template: './src/index.html',//载入文件及路径 publicPath: "js/",//这是build文件下html文件引用js文件的路径 chunks: ['index'],//需要引入的chunk,不配置就会引入所有页面的资源 }), // 使用browser-sync实时刷新页面 new BrowserSyncPlugin({ host: 'localhost', port: 3000, server: { baseDir: ['./build/'] }//会默认访问./build/index.html }), //负责压缩JS代码,并控制是否要显示警告 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: true } }), new webpack.optimize.OccurenceOrderPlugin() ]
这里主要说明一下一下几个个插件:
new webpack.optimize.DedupePlugin()
主要查找相等或近似的模块,避免在最终生成的文件中出现重复的模块,比如可以用它去除依赖中重复的插件。
new webpack.optimize.OccurenceOrderPlugin()
这个插件为组件和模块分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID,通过分析ID,可以建议降低总文件的大小。
new webpack.HotModuleReplacementPlugin()
全局开启代码热替换,
new ExtractTextPlugin("styles.css")
默认情况下,css是被打包到js中的如果接受不了,我们可以应用这个plugin将css style提取出来。
webpack-dev-server使用
webpack-dev-server比较好用的地方在于热替换,更改后不需要重新刷新浏览器,配置上相比其他工具容易的多。简称(HMR).sudo npm install webpack-dev-server --save-dev
我们只要在启动时候指定 –hot指令即可,例如:
webpack-dev-server --progress --colors --hot --inline -d
可以直接复制使用哦,打开url, 尝试修改代码,看看能否自动刷新!
运行指令分析
webpack的运行相对简单:webpack -watch 提供watch方法,实时进行打包更新 webpack -p 对打包后的文件进行压缩 webpack -d 提供SourceMaps,方便调试 webpack --colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤 webpack --profile 输出性能数据,可以看到每一步的耗时 webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
通常情况下我们也会用npm包管理器进行封装,以便于使用,例如:
"scripts": { "start": "./node_modules/.bin/webpack -d --progress --colors --watch", "build/":"./node_modules/.bin/webpack -p" }
总结
总体上来讲,webpack并不是一个新的工具,之前使用范围也不是很广泛,但是自由其过人之处,很多loader还有待继续完善,相信之后的版本会给大家一个不错的惊喜。个人微信公众号
相关文章推荐
- Redux中间件在React和React-Native项目架构中的应用实践
- 关于webpack项目资源加载优化的几个实践(以react举例)
- webpack构建React应用一:创建项目
- 5分钟内使用React、Webpack与ES6构建应用
- webpack+vue+bootstrap项目实践
- webpack多页应用架构专题系列 3
- 从头创建一个基于 React, webpack, babel 的模板项目
- react+redux+webpack移动端项目总结
- Vue + webpack 项目实践
- webpack+react+antd 单页面应用实例
- webpack构建react项目和处理组件的依赖
- React项目构建(利用webpack打包)
- 使用 Babel + React + Webpack 搭建 Web 应用
- webpack多页应用架构专题系列 2
- 大型网站系统架构实践(六)深入探讨web应用集群Session保持
- [react001] 使用webpack自动构建react 项目
- 应用node.js+mongodb数据库实现一个mvc架构的web项目
- express+webpack+react搭建项目
- webpack+react+antd 单页面应用实例
- 用Ajax 构建关键任务的企业级Web 应用 ——《深入 Ajax :架构与最佳实践》