2016-03-21 103 views
0

這個錯誤的含義是什麼?在捆綁angular2應用程序與webpack
「Uncaught SyntaxError:Unexpected token <」in bundel.js 1.Webpack + angular2

這是什麼我失蹤。我已經添加了所有必要的裝載機。

// webpack.config.js 
'use strict'; 

var path = require('path'); 
var autoprefixer = require('autoprefixer'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

//const TARGET = process.env.npm_lifecycle_event; 

module.exports = { 
    //context: __dirname + '/public', 
    entry: './public/components/boot/boot.ts', 
    output: { 
    path: path.resolve('dist/'), // This is where images AND js will go 
    publicPath: 'public/', // This is used to generate URLs to e.g. images 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new ExtractTextPlugin("bundle.css") 
    ], 
    module: { 
    // 
    loaders: [ 
     { 
     test: /\.json/, 
     loader: 'json-loader', 
     }, 
     { 
     test: /\.ts$/, 
     loader: 'ts-loader', 
     }, 
     { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // inline base64 for <=8k images, direct URLs for the rest 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract("style", "css!postcss") 
     }, 
     { 
     test: /\.scss$/, 
     exclude: [/node_modules/], 
     loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded") 
     }, 
     // fonts and svg 
     { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }, 
     { 
     test: /\.(ico|jpe?g|png|gif)$/, 
     loader: 'file' 
     } // inline base64 for <=8k images, direct URLs for the rest 
    ] 
    }, 
    postcss: function(webpack) { 
    return [ 
     autoprefixer({browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']}) 
    ] 
    }, 
    sassLoader: { 
    includePaths: [path.resolve(__dirname, "node_modules")] 
    }, 
    resolve: { 
    // now require('file') instead of require('file.coffee') 
    extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6'] 
    }, 
    devtool: 'source-map' 
}; 

無法調試這個錯誤

+1

錯誤似乎並不存在。你的索引是怎樣的? –

+0

您是否在運行時或構建時發現錯誤?如果它是前者,它可能僅僅是因爲你的服務器不正確地服務你的index.html而不是bundle.js,因此瀏覽器試圖將html評估爲js? – riscarrott

+0

如果已創建,您應該分享您的bundle.js。這可能是由任何事情造成的。內部或外部圖書館,因爲你捆綁整個事情。 – Venky

回答

4

Uncaught SyntaxError: Unexpected token <

這很可能是一個錯誤:

    在你的打字稿
  1. 被提出作爲一個編譯器錯誤的WebPack
  2. 被報告給你。
0

根據我的經驗,出現該錯誤是因爲在某些導入中,名稱或文件類型錯誤。

您是否有html導入?

2

檢查這個好Angular2的WebPack樣品

Angular 2 Webpack sample

這github上的項目演示瞭如何用Angular2以最小的配置使用的WebPack。

這裏的WebPack配置的樣品從這個項目

module.exports = { 
    entry: "./main.ts", 
    output: { 
     path: __dirname, 
     filename: "./dist/bundle.js" 
    }, 
    resolve : { 
     extentions: ['','.js','.ts'] 
    }, 
    module: { 
     loaders : [{ 
      test: /\.ts/, loaders : ['ts-loader'],exclude: /node_modules/ 
     }] 
    } 
}; 
0

嘗試在你的模板(HTML)的頂部添加<!doctype html>