文档章节

gulp与webpack-stream集成配置

WolfX
 WolfX
发布于 2016/05/12 11:03
字数 228
阅读 2553
收藏 3

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']
            }
        }]
    }
};

© 著作权归作者所有

WolfX

WolfX

粉丝 52
博文 246
码字总数 31477
作品 0
南京
技术主管
私信 提问
加载中

评论(1)

kidd41
kidd41
怎么配置plugins
ES6项目构建-1

基础架构 任务自动化gulp 1.什么是任务自动化 减少人工操作,让机器自动监听操作,自动响应。 2.什么是gulp 一个工具。解决自动构建的工具,增强工作流。 3.gulp的作用 完成工作流。利用它的...

yy不会笑
2017/12/18
0
0
ES6项目构建-2(1)

项目构建的目录—创建文件夹 1.文件夹 app 前端代码 js class index.js 入口文件 css views 前端模板 error.ejs 错误模板 index.ejs 入口模板 2.server 服务器代码 3.tasks 构建工具 util 放...

yy不会笑
2017/12/19
0
0
使用gulp编译es6 , less 代码

传统的js代码是不支持箭头函数 和 es6的继承特性的 写个类 , 继承还要写个闭包 , call , prototype。。菜鸟的我 表示挺麻烦的 挺麻烦的 这个只是把幕课网上配置的视频简化成文字 , 下次使...

danielYii
2017/10/30
36
0
前端工程工具(Gulp、Browerify、Webpack、Bower、Yeoman)

Gulp(http://gulpjs.com/):一个NodeJS项目构建工具。 1.全局安装 或 或开发模式安装且加入到package.json中 2.常用gulp插件 gulp-react 可以将jsx文件转换为js文件 3.gulpfile.js 4.exampl...

jedi_knight
2015/10/13
758
0
一个后端的前端学习之旅——2.先搞定gulp

这是我的小本本的笔记,先列出了dev中用到的东西,blog可能写了就懒得懂了,但是小本本是随时更新的 小本本位置 一个gulp的脚手架 https://github.com/WINTR/gulp-frontend-scaffold npm淘宝...

duoduo3_69
2016/02/03
207
1

没有更多内容

加载失败,请刷新页面

加载更多

Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
49分钟前
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0
jenkins 插件下载加速最终方案

推荐做法 1、告诉jenkins 我哪些插件需要更新 jenkins插件清华大学镜像地址 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json 1.进入jenkins系统管理 2.进入插件管...

vasks
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部