[转]基于gulp和webpack的前端工程化
2023-09-11 14:14:15 时间
本文样例代码 :https://github.com/demohi/learning-gulp
本文主要简单介绍一下基于gulp和webpack的前端工程化。
技术栈
- React.js
- reFlux
- Node.js
我们的需求
- 基于CommonJS模块化开发
- 基于React.js的组件化开发(JSX)
- 为保证组件的复用,css需要打包到js中
- 有国际化需求,静态文件需要部署在CDN上面
工程化工具的选择
- gulp(基于stream的构建工具,与grunt相比,速度快且可编程)
- webpack(前端文件打包工具,支持CommonJS、JSX、css等多种文件混合)
工程化流程
开发模式
开发模式比较简单,主要就是监听文件变化,自动进行打包、合并的操作。
生产模式
参考我们的技术栈与需求,我们的静态文件都要发布到cdn上,而且必须有md5版本号,方便快速发布(cdn更新极其缓慢,所以更新必须使用新的文件名)
生产模式主要增加了文件压缩、文件md5名修改、上传cdn、替换html等操作
这样的好处就是上线非常方便,一个命令即可更新线上,而且不存在缓存问题。
代码参考
基于上述流程写了个demo,供大家参考learning-gulp
可优化的点
- 等gulp4发布,可以直接基于gulp来做串行任务
- 增加livereload,不要再刷新
- 使用react-hot-loader,不刷新实时替换修改
相关文章
- React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
- webpack打包提取css到独立文件
- [Tools] Using Webpack require.context to conditionally load file
- [Webpack] Configure Prepack with Webpack
- [Webpack 2] Validate your Webpack config with webpack-validator
- [AngularJS + Webpack] Requiring Templates
- webpack流程图
- 简要分析webpack打包后代码
- 用 webpack 构建 node 后端代码,使其支持 js 新特性并实现热重载
- 前端项目的webpack常用优化方案
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- js逆向8+9-浏览器指纹和node指纹,webpack,jsdom---基础结束,下面是进阶
- [Webpack + React] Import CSS Modules with TypeScript and webpack
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
- [Webpack 2] Maintain sane file sizes with webpack code splitting
- webpack中引入的path[require('path')]是node.js内置的package,用来处理路径的。
- 【收藏】webpack configuration.module has an unknown property ‘loaders‘. These properties arevalid: 解决办法
- [FE] 有效开展一个前端项目-V2 (vuejs-templates/webpack)
- 前端打包利器webpack里utils.cssLoaders的工作原理调试
- image-webpack-loader包安装报错解决
- 一步一步使用webpack+react+scss脚手架重构项目
- webpack 安装、卸载的全部命令