2016-03-21 3 views
0

В чем смысл этой ошибки? После пакетирования angular2 приложения с WebPack
«неперехваченного SyntaxError: Неожиданный маркер <» в 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

Вы должны поделиться своим пакетом.js, если он создан. Это может быть вызвано чем угодно. Внутренние или внешние библиотеки, когда вы объединяете все это. – Venky

ответ

4

Uncaught SyntaxError: Unexpected token <

Это, скорее всего, ошибка:

  1. в вашей машинописи
  2. воспитываются как ошибка компилятора для WebPack
  3. сообщается вам.
0

По моему опыту, эта ошибка возникает из-за неправильного имени или типа файла.

У вас есть импорт html?

2

Проверить это хороший Angular2 Webpack образец

Angular 2 Webpack sample

Этот GitHub проект демонстрирует, как использовать Webpack с Angular2 с минимальной конфигурации.

Вот образец 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

Попробуйте добавить <!doctype html> на верхней части шаблона (HTML).

Смежные вопросы