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

Question

我正在尝试构建一个 angular + typescript + webpack 应用程序。我使用this 作为源并根据我的要求进行了修改。

这是我的 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 脚本，而不是 typescript。如果你想为你的 webpack 配置使用 typescript，你首先需要使用 typescript 编译器将 typescript 文件编译成一个 js 文件。 Webpack 抱怨，因为它无法将您的 webpack.config.ts 解析为有效的 javascript。

显然，另一种选择是安装npm install ts-node。由于 webpack 确实在内部使用 interpret 库，它会自动注册 .ts 扩展名，以便在需要时自动转译。我相信这就是您在上面发布的angular2-seed repo 的工作方式。