給已有的gulp工程裡增加webpack

要解決的問題：
在已有的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