如何在Gulp:Typescript到Babel的链接到网页和源地图？

我正在尝试创建一个可以转换的吞咽任务

TS->（ES6）->Babel->（ES5）->Webpack->[bundle.js，bundle.js.map]

其中源映射映射回原始TS代码

我怎么能大口喝呢

到目前为止，我已经成功地从

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"));

});

//构建
吞咽任务（“构建”、[“清理”]、（）=>{
const tsProject=ts.createProject（“tsconfig.json”，{}）；
常量sourceMapOptions={
sourceRoot:\uuu dirname+“/src”
};
返回tsProject.src（）
.pipe（sourcemaps.init（））
//打字稿
.pipe（tsProject（））
.js
//巴别塔
.管道（巴别塔）({
预设值：[“es2015”]，
插件：[“转换运行时”]
}))
//Webpack由于仍然没有答案，下面是我最后要做的

我必须分两个步骤来完成（想法来自）：


Typescript->（ES6）->Babel->（ES5）
Webpack
打包

使用
源地图加载程序
拾取生成的源地图



/**Typescript->ES6->Babel->ES5*/
吞咽任务（“ts巴别塔”，函数（）{
常数tsconfig={
目标：“es6”，
lib:[“es5”、“dom”]
}
常数babelconfig={
预设值：[“es2015”]，
插件：[“转换运行时”]
}
const tsProject=ts.createProject（tsconfig）；
回灌
.src（“src/***.ts”）
.pipe（sourcemaps.init（））
.pipe（tsProject（））
.js
.管道（巴别塔（巴别塔配置））
.pipe（sourcemaps.write（“.”）
.管道（吸入目的地（“构建/es5”）；
})
/**网页包包*/
吞咽任务（“网页包”[“ts巴别塔”]，函数（）{
常量配置={
devtool：“源地图”，
输出：{
文件名：“app.bundle.js”
},
模块：{
预紧器：[
{
测试：/\.js$/,，
加载器：“源地图加载器”
}
]
}
}
回灌
.src（“build/es5/***.js”）
.pipe（网页包（配置））
.管道（吞咽目标（“构建/捆绑”）；
})