Webpack: Unerwartetes Token: in webpack.config.ts

Question

Ich versuche eine eckige + Typoskript + Webpack-Anwendung zu erstellen. Ich benutzte this als Quelle und änderte wie pro meine Anforderung.

Das ist mein 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; 

wenn ich $> webpack --config webpack.config.ts laufen ich erhalte den folgenden Fehler.

$ 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) 

Vermisse ich einige Webpack-Konfiguration?

Answer 1

Soweit ich weiß, muss Ihre Webpack-Konfiguration ein JavaScript-Skript sein, kein Typoskript. Wenn Sie Typoskript für Ihre Webpack-Konfiguration verwenden möchten, müssten Sie zuerst die Typoskript-Datei mit dem Typskript-Compiler in eine js-Datei kompilieren. Webpack beschwert sich, weil es Ihre webpack.config.ts nicht als gültiges Javascript analysieren kann.

Offensichtlich ist eine andere Option, npm install ts-node zu installieren. Da Webpack intern die Bibliothek interpret verwendet, registriert es automatisch die Erweiterung .ts für den automatischen Versand bei Bedarf. Ich glaube, das ist, wie die angular2-seed Repo Sie oben geschrieben funktioniert.