webpack结合gulp打包
2016-04-05 17:49
561 查看
在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西。然而,在我的实际项目中,单独使用它们两者不能满足项目的需求。我遇到了下面的一些问题。
问题1:
因为我的图片需要放单cdn上面去。而我们知道,webpack中,如果是大于8K的图片,它是没有转化为base64的,而且html中引入的图片实际上是会被打包到js当中,因此我需要手动去改那些图片的路劲。比较麻烦
问题2:
虽然webpack在打包的过程中会自动帮你把css,js的路劲引入到html中,但是我在打包之前,我还是要自己引入我本地的文件来进编译。打包后遇到路径重复的问题。因为你自己引入了一次,而打包后会再引入一次。
因为,为了解决上面的两个问题,而且为了让打包更加的智能化,所以我将两者结合了起来一起用。下面做一个小小的总结。
其实webpack结合gulp的原理就是将webpack的出口文件作为gulp的入口文件。这里举一个打包js为例:
webpack.config.js的部分截图
我们将打包后的文件放在了E/word/dev/js这个目录下。
在gulpfile.js中,部分配置如下:
这里是一些配置,参考即可,需要的就引入进来就
重点在这里。我们可以看到,在gulp的如果文件,即 src目录里面的路径,和我们webpack的出口路径是一样的。
而gulp的出口路劲,和入口路径相等。因为我们只希望将webpack打包后的images路劲替换为我们cdn上的路劲而已。
就是这么简单,webpack就可以和gulp结合使用了。其实两者只是一个互补的状态,比如webpack没有而gulp有的,我们就可以拿来用。
其他的大家可以试试,比如结合一起打包html,css,或者压缩图片什么。
其实原理是一样的:webpack的出口文件就是gulp的入口文件
如果您觉得文章有用,也可以给咸鱼老弟发个微信小额红包鼓励鼓励,哈哈
问题1:
因为我的图片需要放单cdn上面去。而我们知道,webpack中,如果是大于8K的图片,它是没有转化为base64的,而且html中引入的图片实际上是会被打包到js当中,因此我需要手动去改那些图片的路劲。比较麻烦
问题2:
虽然webpack在打包的过程中会自动帮你把css,js的路劲引入到html中,但是我在打包之前,我还是要自己引入我本地的文件来进编译。打包后遇到路径重复的问题。因为你自己引入了一次,而打包后会再引入一次。
因为,为了解决上面的两个问题,而且为了让打包更加的智能化,所以我将两者结合了起来一起用。下面做一个小小的总结。
其实webpack结合gulp的原理就是将webpack的出口文件作为gulp的入口文件。这里举一个打包js为例:
webpack.config.js的部分截图
我们将打包后的文件放在了E/word/dev/js这个目录下。
在gulpfile.js中,部分配置如下:
这里是一些配置,参考即可,需要的就引入进来就
重点在这里。我们可以看到,在gulp的如果文件,即 src目录里面的路径,和我们webpack的出口路径是一样的。
而gulp的出口路劲,和入口路径相等。因为我们只希望将webpack打包后的images路劲替换为我们cdn上的路劲而已。
就是这么简单,webpack就可以和gulp结合使用了。其实两者只是一个互补的状态,比如webpack没有而gulp有的,我们就可以拿来用。
其他的大家可以试试,比如结合一起打包html,css,或者压缩图片什么。
其实原理是一样的:webpack的出口文件就是gulp的入口文件
如果您觉得文章有用,也可以给咸鱼老弟发个微信小额红包鼓励鼓励,哈哈
相关文章推荐
- webpack echarts配置实例
- Webpack入门
- [转] webpack debug in webstorm
- webpack入门教程
- webpack window 安装loader
- webpack window下配置的hello world
- webpack 无法安装
- webpack以及loader 加载命令
- 使用webpack loader加载器
- webpack sourcemap 选项多种模式的一些解释
- webpack学习笔记
- webpack 项目实践
- [转] Webpack 入门指迷
- [WebStrom] Cannot detect file change to trigger webpack re-compile
- webpack 使用优化指南
- WebPack系列教程(十二):示例
- WebPack系列教程(十一):文档列表
- WebPack系列教程(十):起步
- WebPack系列教程(九):故障排除
- WebPack系列教程(八):DEV TOOLS