How to chain in Gulp: Typescript to Babel to Webpack with source map?

gulp, gulp-babel, gulp-typescript, source-maps, webpack

Solution

Since there are still no answers, here's what I ended up doing.

I had to do it in two steps (idea from here):

- `Typescript -> (ES6) -> Babel -> (ES5)`

- `Webpack` to bundle

- Using `source-map-loader` to pick up the generated source maps

/** Typescript -> ES6 -> Babel -> ES5 */
gulp.task("ts-babel", function () {

  const tsconfig = {
    target: "es6",
    lib: ["es5", "dom"]
  }

  const babelconfig = {
    presets: ["es2015"],
    plugins: ["transform-runtime"]
  }
  const tsProject = ts.createProject(tsconfig);

  return gulp
  .src("src/**/*.ts")
  .pipe(sourcemaps.init())
  .pipe(tsProject())
  .js
  .pipe(babel(babelconfig))
  .pipe(sourcemaps.write("."))
  .pipe(gulp.dest("build/es5"));
})

/** Webpack bundle */
gulp.task("webpack", ["ts-babel"], function () {
  const config = {
    devtool: "source-map",
    output: {
      filename: "app.bundle.js"
    },
    module: {
      preLoaders: [
        {
          test: /\.js$/,
          loader: "source-map-loader"
        }
      ]
    }
  }
  return gulp
  .src("build/es5/**/*.js")
  .pipe(webpack(config))
  .pipe(gulp.dest("build/bundle"));
})

Problem

I'm trying to create a gulp task that transforms `TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map]` where the source map maps back to the original TS code. How can I do this with gulp? So far, I've managed to get it working from `TS -> ES6 -> Babel -> ES5` ``` // Build gulp.task("build", ["clean"], () => { const tsProject = ts.createProject("tsconfig.json", {}); const sourceMapOptions = { sourceRoot: __dirname+"/src" }; return tsProject.src() .pipe(sourcemaps.init()) // Typescript .pipe(tsProject()) .js // Babel .pipe(babel({ presets: ["es2015"], plugins: ["transform-runtime"] })) // Webpack <-- ???? .pipe(webpack({})) // <-- ???? .pipe(sourcemaps.write(".", sourceMapOptions)) .pipe(gulp.dest("./dist")); }); ``` But have no idea how to add webpack to the mix.

Original source