gulp-webpack 无法解析节点模块答案

【问题标题】：gulp-webpack can't resolve node modulesgulp-webpack 无法解析节点模块
【发布时间】：2018-01-25 06:03:35
【问题描述】：

在这里构建一个现代 Angular 应用程序。

我正在使用 gulp-webpack 进行快速开发构建。我的打字稿捆绑需要 webpack，因为我显然依赖于一些节点模块。但奇怪的是，gulp-webpack 似乎并没有自动解析到我的 node_modules 目录的导入！结果，它抛出了大约一百万个打字稿错误，说它找不到模块，而且我的包中没有，例如，角度。

这是我的（缩写）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' 开始收到错误

./src/app/app.component.ts 中的错误模块未找到：错误：不能解析 C:\appdir\src\app @ 中的模块“zone.js” ./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 ()
   {

   }
}

发生了什么事？

【问题讨论】：

标签： typescript webpack gulp gulp-webpack

【解决方案1】：

gulp-webpack 是一个绝对古老的 npm 包。

这里的解决方案是使用webpack-stream，这是webpack 3.0最新的

【讨论】：