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集成配置的更多相关文章

  1. gulp结合webpack开启多页面模式,配置如下

    首先老规矩哈.全局包安装先 cnpm install webpack -g cnpm install gulp -g cnpm install babel -g //转换Es6 上面的整合在一起安装可 ...

  2. Grunt、Gulp区别 webpack、 requirejs区别

    1. 书写方式 grunt 运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等.而且不同的插件可能会有自己扩展字段,导致认知成本的提高,运用的时候 ...

  3. 前端架构gulp与webpack(知识点整理)

    一 概念介绍 gulp 是 task runner,Webpack 是 module bundler.可以这么说, Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代,或者直接说和 ...

  4. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  5. webpack react基础配置一

    简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs  npm便自动集成了,通过npm安装其 ...

  6. [转]基于gulp和webpack的前端工程化

    本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...

  7. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  8. Gulp和webpack的区别,是一种工具吗?

    疑问:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 它们的区别和概念 ------------------------------------ ...

  9. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

随机推荐

  1. 使用Struts 2防止表单重复提交

    用户重复提交表单在某些场合将会造成非常严重的后果.例如,在使用信用卡进行在线支付的时候,如果服务器的响应速度太慢,用户有可能会多次点击提交按钮,而这可能导致那张信用卡上的金额被消费了多次.因此,重复提 ...

  2. tk画图

    Page 387 of chapter 7 """ 6-23 page 343 play media files """ def odd() ...

  3. Office2010安装错误1402问题(我安装成功了)

    转载:http://blog.sina.com.cn/s/blog_555ea2470101831d.html 做个记录. 1.卸载OFFICE  使用工具 MicrosoftFixit,Window ...

  4. 有关docker的学习链接

    本文是自己搜索的比较好的网上资源,便于有兴趣者查阅. 英文官网 https://docs.docker.com/engine/getstarted/ 中文入门手册 http://www.docker. ...

  5. javascript - 可编辑表格控件 支持全键盘操作(无JS框架)

    项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定 ...

  6. java中递归的方法的实例

    package com.demo.recursion; // 所谓递归,是指程序调用自身,当然,递归不会无休止地调用下去,它必然有一个出口,当满足条件时程序也就结束了,不然的话,那就是死循环了.// ...

  7. 【转】Hibernate 常见异常

    转载地址:http://smartan.iteye.com/blog/1542137 Hibernate 常见异常net.sf.hibernate.MappingException        当出 ...

  8. vue 导航钩子

    导航钩子 (译者:『导航』表示路由正在发生改变.) 正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的 ...

  9. 处理session跨域几种的方案

    常用跨域共用session的是登录模块,我相信很多开发的朋友的都遇到过,只需要一个地方登录,相关联的网站也是处于登录状态.两种情况:一种9streets.cn和a.9streets.cn之间,另一种是 ...

  10. 一首诗,致亲爱的csdn

    来自csdn的Rachel-Zhang姐姐 还记得--致亲爱的csdn 还记得你年轻时的摸样? 简单的文字,无瑕的脸庞. 现在的你,满脸风霜. 五粮液的广告,在我的文章中久久荡漾. 还记得当初的梦想? ...