Webpack：意外令牌：在webpack.config.ts中

Question

我正在尝试构建一个angular +打字稿+ webpack应用程序。我将其用作源并根据我的要求进行了修改。

这是我的webpack.config.ts：

const {
  optimize: {
    CommonsChunkPlugin,
    DedupePlugin
  }
} = require('webpack');

const { ConcatSource } = require('webpack-sources');
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
const AssetsPlugin = require('assets-webpack-plugin');
const path = require('path');
const fs = require('fs');

function root(__path = '.') {
  return path.join(__dirname, __path);
}

// type definition for WebpackConfig is defined in webpack.d.ts
function webpackConfig(options: EnvOptions = {}): WebpackConfig {

  const CONSTANTS = {
    ENV: JSON.stringify(options.ENV),
    PORT: 3000,
    HOST: 'localhost',
    HTTPS: false
  };

  const isProd = options.ENV.indexOf('prod') !== -1;

  return {
    cache: true,
    devtool: 'source-map',
    entry: {
      main: './src/index'
    },

    output: {
      path: root('dist'),
      filename: '[name].bundle.js',
      sourceMapFilename: '[name].map',
    },

    module: {
      loaders: [
        {
          test: /\.ts$/,
          loader: 'awesome-typescript-loader',
          exclude: [/\.(spec|e2e|d)\.ts$/],
          include: [root('../src')]
        },
        { test: /\.json$/, loader: 'json-loader', include: [root('../src')] }
      ]
    },


    plugins: [
      new AssetsPlugin({
        path: root('dist'),
        filename: 'webpack-assets.json',
        prettyPrint: true
      }),
      new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ],
    resolve: {
      extensions: ['.ts', '.js', '.json']
    },

    node: {
      global: true,
      process: true,
      Buffer: false,
      crypto: 'empty',
      module: false,
      clearImmediate: false,
      setImmediate: false,
      clearTimeout: true,
      setTimeout: true
    }
  };
}

// Export
module.exports = webpackConfig;

当我运行$> webpack --config webpack.config.ts时，出现以下错误。

$ webpack --config ./configs/webpack.config.ts
PathToProject\WebStorageManager\configs\webpack.config.ts:19
function webpackConfig(options: EnvOptions = {}): WebpackConfig {
                              ^
SyntaxError: Unexpected token :
    at Object.exports.runInThisContext (vm.js:76:16)

我会错过一些Webpack配置吗？

Answer 1

据我所知，您的webpack配置必须是JavaScript脚本，而不是打字稿。如果要在Webpack配置中使用打字稿，则首先需要使用打字稿编译器将打字稿文件编译为js文件。Webpack正在抱怨，因为它无法将您解析webpack.config.ts为有效的javascript。

显然，另一个选择是install npm install ts-node。由于webpack确实在内部使用该interpret库，因此它将根据需要自动注册.ts扩展名以进行自动转换。我相信这就是angular2-seed您上面发布的回购协议的工作方式。