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

};

Angular 2.0.2 - Webpack问题

1 个答案: