gulp-webpackはノードモジュールを解決できません

Question

ここに近代的な角型アプリケーションを構築します。

私は、高速開発用にgulp-webpackを使用しています。私はいくつかのノードモジュールに依存しているので、私のタイスクリプトのバンドルにはwebpackが必要です。しかし、不思議なことに、gulp-webpackは自動的にnode_modulesディレクトリへのインポートを解決しているようには見えません！結果として、それはモジュールを見つけることができないと言って約100万のタイプコピーエラーをスローし、私のバンドルは、例えば、それに角を持たない。ここで

は私（略し）gulpfileです：

var gulp = require('gulp') 
var path = require('path'); 
// var concat = require('gulp-concat') 
var expect = require('gulp-expect-file') 
var plumber = require('gulp-plumber') 
var sourcemaps = require('gulp-sourcemaps') 
// var uglify = require('gulp-uglify') 

var webpack = require('gulp-webpack') 
var sass = require('gulp-sass') 
var nodemon = require('gulp-nodemon') 
var ts = require('gulp-typescript') 
var del = require('del') 
var rename = require('gulp-rename') 
var inject = require('gulp-inject-string') 
// Client-side javascript to single js file 
gulp.task('js', function() 
{ 
    gulp.safeSrc('src/app/main.ts') 
     .pipe(sourcemaps.init()) 
     .pipe(webpack({ 
     context: __dirname, 
     entry: ['./src/app/main'], 
     resolve: { 
      modulesDirectories: ["./node_modules"], 
      extensions: ['.ts', '.js'] 
     }, 
     resolveLoader: { 
      root: path.resolve(__dirname, 'node_modules') 
     }, 
     output: { 
      filename: "bundle.js" 
     }, 
     module: { 
      loaders: [ 
       { 
       test: /\.js$/, 
       loader: 'babel-loader' 
       }, 
       { 
       test: /\.ts$/, 
       loader: 'ts-loader' 
       } 
      ], 
     }, 
    })) 
     .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('public')) 
}) 

そして、ここでは私のapp.component.tsだ - 私は何が起こっているimport 'zone.js'

ERROR in ./src/app/app.component.ts Module not found: Error: Cannot resolve module 'zone.js' in C:\appdir\src\app @ ./src/app/app.component.ts 12:0-18

import 'zone.js'; 
import 'reflect-metadata'; 
import { Component } from '@angular/core'; 

import { Observable } from 'rxjs/Rx'; 
import { Store } from '@ngrx/store'; 
import { AppStore } from '../models/application-store'; 
import { AuthSvc } from './auth/auth.svc'; 

import { Action } from './actions' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="app"> 
    <main-header> 
    </main-header> 
    <router-outlet></router-outlet> 
    </div>` 

}) 

export class AppComponent { 
    error: any; 
    showNgFor = false; 
    constructor() 
    { 

    } 
} 

とすぐにエラーが発生して起動しますか？

Answer 1

gulp-webpackは、古くからのnpmパッケージです。

ここでの解決方法は、webpack-streamです。これはwebpack 3.0の最新です。