Question

这个错误是什么意思？将angular2应用程序与webpack捆绑后＆＃34;未捕获的SyntaxError：意外的令牌＆lt;＆＃34;在bundel.js 1。

我错过了什么。我添加了所有必要的装载程序。

// 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'
};

无法调试此错误

Answer 1

未捕获的SyntaxError：意外的标记＆lt;

这很可能是一个错误：

中的

被编译为webpack的编译错误

被报告给你。

Answer 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/
        }]
    }
};

Answer 3

根据我的经验，出现该错误是因为在某些导入中，名称或文件类型错误。

你有html导入吗？

Answer 4

尝试在模板（HTML）上添加<!doctype html>。

Webpack + angular2

4 个答案: