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

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

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

1 个答案: