2016-03-21 5 views
0

このエラーの意味は? WebPACKので
「キャッチされないでSyntaxError:予期しないトークン<を」angular2アプリをバンドルした後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

実行時またはビルド時にエラーが表示されますか?前者の場合、単にブラウザがbundle.jsの代わりにindex.htmlを正しく提供していない可能性がありますので、ブラウザは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>を追加してみてくださいです。