Webpack + angular2答案

【问题标题】：Webpack + angular2Webpack + angular2
【发布时间】：2016-03-21 09:14:09
【问题描述】：

这个错误是什么意思？将 angular2 应用程序与 webpack 捆绑后
“Uncaught SyntaxError: Unexpected token

我错过了什么。我已经添加了所有必要的加载器。

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

无法调试此错误

【问题讨论】：

错误似乎不存在。您的索引看起来如何？
您是在运行时还是在构建时看到错误？如果是前者，可能只是您的服务器错误地为您的 index.html 而不是 bundle.js 提供服务，因此浏览器尝试将 html 评估为 js？
你应该分享你的 bundle.js 如果它被创建了。这可能是由任何事情引起的。捆绑整个内容时的内部或外部库。

标签： typescript angular webpack

【解决方案1】：

Uncaught SyntaxError: Unexpected token

这很可能是一个错误：

在您的 TypeScript 中
作为编译器错误被引发到 webpack
正在向您报告。

【讨论】：

【解决方案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/
        }]
    }
};

【讨论】：

【解决方案3】：

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

你有 html 导入吗？

【讨论】：

【解决方案4】：

尝试在您的模板 (HTML) 顶部添加 <!doctype html>。

【讨论】：