观察使用webpack和gulp for angular 5 app - AOT的增量构建的更改

Question

为了编译我的角度应用程序AOT，我使用webpack和gulp。 我注意到webpack的监视步骤不能很好地工作，有时是工作，有时不工作，当它工作时，文件没有在网站上更新。

请看下面的代码，告诉我是否有什么可以做的最小变化？或者我应该写一些新东西？

packages.json

  {
  "name": "my-app",
  "version": "1.2.0",
  "scripts": {
    "start": "gulp build:dev",
    "test": "gulp test",
    "build": "gulp build",
    "postinstall": "typings install"
  },
  "engines": {
    "node": "6.10.3",
    "npm": "4.0.5"
  },
  "license": "LicenseRef-LICENSE",
  "private": true,
  "repository": {
    "url": "git+ssh://gitolite@my-app"
  },
  "dependencies": {
    "@angular/animations": "5.0.2",
    "@angular/common": "5.0.2",
    "@angular/compiler": "5.0.2",
    "@angular/compiler-cli": "5.0.2",
    "@angular/core": "5.0.2",
    "@angular/forms": "5.0.2",
    "@angular/http": "5.0.2",
    "@angular/platform-browser": "5.0.2",
    "@angular/platform-browser-dynamic": "5.0.2",
    "@angular/platform-server": "5.0.2",
    "@angular/router": "5.0.2",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "2.0.0",
    "@types/file-saver": "1.3.0",
    "@types/jasmine": "2.8.2",
    "angular2-infinite-scroll": "0.3.4",
    "core-js": "2.4.1",
    "file-saver": "1.3.3",
    "jasmine": "2.8.0",
    "jstz": "1.0.9",
    "moment": "2.18.1",
    "moment-timezone": "0.5.13",
    "ngx-bootstrap": "2.0.0-beta.8",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.2",
    "xlsx": "0.11.7",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@ngtools/webpack": "1.8.0",
    "autoprefixer": "6.7.6",
    "bootstrap-sass": "3.3.7",
    "custom-tslint-formatters": "2.1.1",
    "del": "2.2.2",
    "enhanced-resolve": "3.3.0",
    "gulp": "3.9.1",
    "gulp-add-src": "0.2.0",
    "gulp-cache-bust": "1.1.0",
    "gulp-exec": "2.1.3",
    "gulp-htmlmin": "3.0.0",
    "gulp-if": "2.0.2",
    "gulp-ignore": "2.0.2",
    "gulp-imagemin": "3.1.1",
    "gulp-jsonminify": "1.0.0",
    "gulp-postcss": "6.3.0",
    "gulp-preprocess": "2.0.0",
    "gulp-sass": "3.1.0",
    "gulp-sourcemaps": "2.4.1",
    "gulp-svg-sprite": "1.3.6",
    "gulp-tslint": "7.1.0",
    "gulp-util": "3.0.8",
    "jasmine-core": "2.8.0",
    "json-loader": "0.5.4",
    "karma": "1.5.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-ie-launcher": "1.0.0",
    "karma-jasmine": "1.1.0",
    "karma-mocha-reporter": "2.2.2",
    "karma-sourcemap-loader": "0.3.7",
    "karma-typescript": "3.0.8",
    "karma-typescript-es6-transform": "1.0.2",
    "karma-webpack": "2.0.6",
    "postcss-loader": "1.3.3",
    "postcss-scss": "0.4.1",
    "precss": "1.4.0",
    "raw-loader": "0.5.1",
    "run-sequence": "1.2.2",
    "sass-loader": "6.0.6",
    "ts-loader": "2.0.1",
    "tslint": "5.8.0",
    "typescript": "2.4.2",
    "webpack": "2.2.1"
  }
}

gulp.js - 主要任务

var gulp = require('gulp'),
    addsrc = require('gulp-add-src'),
    config = require('./gulp.config.js'),
    del = require('del'),
    tslint = require('gulp-tslint'),
    gulpif = require('gulp-if'),
    preprocess = require('gulp-preprocess'),    
    htmlmin = require('gulp-htmlmin'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    runSequence = require('run-sequence'),
    webpack = require('webpack'),
    webpackConfig = config.webpack,
    webpackCompiler = webpack(webpackConfig),
    karmaServer = require('karma').Server,
    cachebust = require('gulp-cache-bust'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    imagemin = require('gulp-imagemin'),
    svgSprite = require('gulp-svg-sprite'),
    gulpIgnore = require('gulp-ignore'),
    jsonminify = require('gulp-jsonminify'),
    exec = require('child_process').exec;

gulp.task('build:dev', function (callback) {
  runSequence(
    'clean', 
    'copy:assets',
    ['html:index', 'sass:styles', 'tslint', 'typescript:dev'],
    ['watch'],
    callback
  )
});

gulp.task("typescript:dev", function(callback) {
    var initialBuild = true;

    webpackCompiler.watch(null, function(err, stats) {
        if(err) 
        {
            throw new gutil.PluginError("typescript:dev", err);
        }
        if (stats.hasErrors()) {
            console.log(stats.toString("errors-only"));
        }

        if (initialBuild) 
        {
            initialBuild = false;

            // notify gulp that the initial task is done (now watching for changes)
            callback();
        }
        else
        {
            console.log("typescript updated");
        }
    });
});

webpack.config.js

var webpackConfig = {
    entry: {
        'polyfills': './my-app/polyfills.ts',
        'vendor': './my-app/vendor.ts',
        'main': './my-app/main.ts'
    },

    output: {
        path: __dirname + '/../dist',
        filename: "[name].bundle.js"
    },

    resolve: {
        extensions: ['.js', '.ts', '.json', '.html', '.scss'],
        enforceExtension: false
    },
    module: {
        rules: [
            { test: /\.ts$/, loaders: ['@ngtools/webpack'] },
            { test: /\.html$/, loader: "raw-loader", options: { exclude: /\.async\.html$/} },
            {
                test: /\.scss$/,
                use:[
                    {loader:"raw-loader"},
                    {loader:"postcss-loader", options:{syntax:"postcss-scss", plugins: postcssConfig}},
                    {loader:"sass-loader", options:{outputStyle:"expanded"}}
                ]
            }
        ],
        noParse: [/angular2\/bundles\/.+/]
    },

    plugins: [
        new AotPlugin({tsConfigPath: 'my-app/tsconfig.json', entryModule: __dirname + '/../my-app/my-app/app.module#AppModule', debug: true}),
        new webpack.optimize.CommonsChunkPlugin({name: ['main', 'vendor', 'polyfills']}),
        new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, "doesnotexists")
  ]
};

当我运行npm start时，我希望webpack会监视ts文件中的任何更改，并仅重建那些已更改的文件。

再次感谢你