Angular 2.0.2 - Webpack問題

Question

我最近將我的Angular2應用程序升級到2.0.2（以前是rc5，效果很好），並遇到了（我相信）使用webpack的問題。

當使用webpack.optimize.UglifyJsPlugin插件，我得到以下錯誤：

stream.js:74 
    throw er; // Unhandled stream error in pipe. 
^
Error: app.bundle.js from UglifyJs 
SyntaxError: Unexpected token: keyword (function) [./~/@angular/platform-browser/src/dom/dom_adapter.js:9,0] 

沒有運行該插件我得到一個JavaScript錯誤：Uncaught SyntaxError: Unexpected token export.在平臺的瀏覽器包含的開始。

有沒有人遇到過這個問題？我包括我的webpack配置以及我的package.json。

Webpack.config

var webpack = require('webpack'); 
//var HtmlWebpackPlugin = require('html-webpack-plugin'); 
//var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin');  
module.exports = { 
entry: { 
    'app': './wwwroot/app/main.ts', 
    'vendors': './wwwroot/app/vendors.ts', 
    'polyfills': './wwwroot/app/polyfills.ts' 
}, 

devtool: 'source-map', 

output: { 
    filename: '[name].bundle.js', 
    chunkFilename: '[id].bundle.chunk.js', 
    publicPath: '/dist/' 
}, 

htmlLoader: { 
    minimize: false // workaround for ng2 
}, 

resolve: { 
    extensions: ['', '.js', '.ts'] 
}, 

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
     }, 
     { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
      loader: 'file?name=assets/[name].[hash].[ext]' 
     }, 
     { 
      test: /\.css$/, 
      exclude: './wwwroot/app', 
      loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, 
     { 
      test: /\.css$/, 
      include: './wwwroot/app', 
      loader: 'raw' 
     } 
    ] 
}, 

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: ['app','vendors','polyfills'] 
    }), 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 
    beautify: false, 
    mangle: { screw_ie8 : true, keep_fnames: true }, 
    compress: { screw_ie8: true }, 
    comments: false 
    }), 
    new ExtractTextPlugin('[name].[hash].css') 
    /* 
    , 
    new HtmlWebpackPlugin({ 
    template: 'wwwroot/app/index.html' 
    }), 
    new ScriptExtHtmlWebpackPlugin({ 
     defaultAttribute: 'defer' 
    }) 
    */ 
] 

};

的package.json

{ 
"version": "1.0.0", 
"name": "asp.net", 
"scripts": { 
"tsc": "tsc", 
"tsc:w": "tsc -w", 
"typings": "typings", 
"postinstall": "typings install" 
}, 
"private": true, 
"dependencies": { 
"@angular/common": "^2.0.2", 
"@angular/compiler": "^2.0.2", 
"@angular/core": "^2.0.2", 
"@angular/forms": "^2.0.2", 
"@angular/http": "^2.0.2", 
"@angular/platform-browser": "^2.0.2", 
"@angular/platform-browser-dynamic": "^2.0.2", 
"@angular/router": "^3.0.2", 
"@angular/upgrade": "^2.0.2", 
"angular-in-memory-web-api": "^0.1.1", 
"angular2-template-loader": "^0.4.0", 
"angulartics2": "^1.1.9", 
"awesome-typescript-loader": "^2.2.4", 
"core-js": "^2.4.1", 
"del": "^2.2.1", 
"extract-text-webpack-plugin": "^1.0.1", 
"gulp": "^3.9.1", 
"gulp-concat": "^2.6.0", 
"gulp-cssmin": "^0.1.7", 
"gulp-sass": "^2.3.2", 
"gulp-sourcemaps": "^1.6.0", 
"gulp-typescript": "^2.14.1", 
"gulp-uglify": "^1.5.4", 
"html-loader": "^0.4.3", 
"html-webpack-plugin": "^2.22.0", 
"intl": "^1.2.4", 
"prismic.io": "^3.1.3", 
"reflect-metadata": "^0.1.8", 
"rxjs": "5.0.0-beta.12", 
"script-ext-html-webpack-plugin": "^1.3.0", 
"ts-loader": "^0.8.2", 
"typescript": "^2.0.3", 
"typings": "^1.3.1", 
"web-animations-js": "^2.2.2", 
"webpack": "^1.13.2", 
"webpack-stream": "^3.2.0", 
"zone.js": "^0.6.25" 
}, 
"devDependencies": { 
"jasmine-core": "2.4.1", 
"karma": "^1.1.1", 
"karma-chrome-launcher": "^1.0.1", 
"karma-jasmine": "^1.0.2", 
"karma-webpack": "^1.7.0" 
} 
} 

Answer 1

答案是升級到的WebPack 2，而不是使用1以下更新的WebPack配置：

'use strict'; 
let path = require('path'); 
let webpack = require('webpack'); 

module.exports = { 
entry: { 
'app': './wwwroot/app/main.ts', 
'polyfills': './wwwroot/app/polyfills.ts', 
'vendors': './wwwroot/app/vendors.ts', 
}, 

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

module: { 
rules: [ 
    { 
    test: /\.ts$/, 
    use: [ 
     'awesome-typescript-loader', 
     'angular2-template-loader' 
    ] 
    }, 
    { 
    test: /\.(html|css)$/, 
    loader: 'raw-loader' 
    } 
] 
}, 

plugins: [ 
new webpack.LoaderOptionsPlugin({ 
    minimize: true, 
    debug: false 
}), 
new webpack.optimize.UglifyJsPlugin({ 
    compress: { 
    warnings: false 
    }, 
    output: { 
    comments: false 
    }, 
    sourceMap: true 
}), 
new webpack.ProgressPlugin(), 
new webpack.ContextReplacementPlugin(
    // The (\\|\/) piece accounts for path separators in *nix and Windows 
    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
    path.join(process.cwd(), './wwwroot/app') 
) 
], 

resolve: { 
modules: [ 
    'node_modules', 
    path.resolve(__dirname, './wwwroot/app') 
], 
extensions: ['.ts', '.js'] 
}, 

devtool: false 

};