A-A+

给已有的gulp工程里增加webpack

2017年02月12日 webpack 暂无评论 阅读 189 次

要解决的问题:
在已有的gulp工程里使用webpack打包js

思路:
把webpack的输出作为原来gulp里js的输入。

  • yo gulp-webapp
  • 增加webpack.config.js
    var path = require("path");
    module.exports = {
        entry: "./app/src/js/entry.js",
        output: {
            path: path.join(__dirname, "app/scripts"),
            filename: "main.js"
        },
        module: {
            loaders: [
                { test: /.css$/, loader: "style!css" },
                // required for react jsx
                { test: /.js$/,    loader: "jsx-loader" }
            ]
        }
    };
  • 在gulpfile.js中增加
    var gutil = require("gulp-util");
    var webpack = require("webpack");
    var webpackConfig = require("./webpack.config.js");
    gulp.task("webpack", function(callback) {
        var myConfig = Object.create(webpackConfig);
        // run webpack
        webpack(
            // configuration
            myConfig
        , function(err, stats) {
            // if(err) throw new gutil.PluginError("webpack", err);
            // gutil.log("[webpack]", stats.toString({
            //     // output options
            // }));
            callback();
        });
    });
  • 在serve任务里,其他gulp.watch(...);后面增加
    gulp.watch('app/src/**/*.js', ['webpack']);

工程样例:

https://bitbucket.org/fangj/yo-gulp-webapp-webpack

参考:

https://github.com/yeoman/generator-gulp-webapp http://webpack.github.io/docs/usage-with-gulp.html

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录