gulp与webpack-stream集成配置
webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack
1.安装webpack-stream
很重要的插件,当然也可以直接使用官方的webpack,集成方式可以看webpack官网. 但webpack-stream更符合gulp的流语法.
sudo npm install --save webpack-stream vinyl-named
windows用户去掉sudo, vinyl-named用来保持输入和输出的文件名相同, 否则会自动生成一个hash.
2.配置文件的编写:
gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var webpackConfig = require("./webpack.config.js");
gulp.task('webpack', function() {
return gulp.src('./www/src/main.jsx')
.pipe(named())
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./www/build/'));
});
webpack.config.js
注意:用webpack-stream不需要配置entry和output
module.exports = {
watch: true,
devtool: "source-map",
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}, {
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
};
gulp与webpack-stream集成配置的更多相关文章
- gulp结合webpack开启多页面模式,配置如下
首先老规矩哈.全局包安装先 cnpm install webpack -g cnpm install gulp -g cnpm install babel -g //转换Es6 上面的整合在一起安装可 ...
- Grunt、Gulp区别 webpack、 requirejs区别
1. 书写方式 grunt 运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等.而且不同的插件可能会有自己扩展字段,导致认知成本的提高,运用的时候 ...
- 前端架构gulp与webpack(知识点整理)
一 概念介绍 gulp 是 task runner,Webpack 是 module bundler.可以这么说, Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代,或者直接说和 ...
- webpack + vuejs 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...
- webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
- [转]基于gulp和webpack的前端工程化
本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- Gulp和webpack的区别,是一种工具吗?
疑问:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 它们的区别和概念 ------------------------------------ ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
随机推荐
- 使用Struts 2防止表单重复提交
用户重复提交表单在某些场合将会造成非常严重的后果.例如,在使用信用卡进行在线支付的时候,如果服务器的响应速度太慢,用户有可能会多次点击提交按钮,而这可能导致那张信用卡上的金额被消费了多次.因此,重复提 ...
- tk画图
Page 387 of chapter 7 """ 6-23 page 343 play media files """ def odd() ...
- Office2010安装错误1402问题(我安装成功了)
转载:http://blog.sina.com.cn/s/blog_555ea2470101831d.html 做个记录. 1.卸载OFFICE 使用工具 MicrosoftFixit,Window ...
- 有关docker的学习链接
本文是自己搜索的比较好的网上资源,便于有兴趣者查阅. 英文官网 https://docs.docker.com/engine/getstarted/ 中文入门手册 http://www.docker. ...
- javascript - 可编辑表格控件 支持全键盘操作(无JS框架)
项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定 ...
- java中递归的方法的实例
package com.demo.recursion; // 所谓递归,是指程序调用自身,当然,递归不会无休止地调用下去,它必然有一个出口,当满足条件时程序也就结束了,不然的话,那就是死循环了.// ...
- 【转】Hibernate 常见异常
转载地址:http://smartan.iteye.com/blog/1542137 Hibernate 常见异常net.sf.hibernate.MappingException 当出 ...
- vue 导航钩子
导航钩子 (译者:『导航』表示路由正在发生改变.) 正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的 ...
- 处理session跨域几种的方案
常用跨域共用session的是登录模块,我相信很多开发的朋友的都遇到过,只需要一个地方登录,相关联的网站也是处于登录状态.两种情况:一种9streets.cn和a.9streets.cn之间,另一种是 ...
- 一首诗,致亲爱的csdn
来自csdn的Rachel-Zhang姐姐 还记得--致亲爱的csdn 还记得你年轻时的摸样? 简单的文字,无瑕的脸庞. 现在的你,满脸风霜. 五粮液的广告,在我的文章中久久荡漾. 还记得当初的梦想? ...