Webpack : 예기치 않은 토큰 : webpack.config.ts

각도 + typescript + webpack 응용 프로그램을 빌드하려고합니다. 나는 this을 출처로 사용하고 나의 요구 사항에 따라 수정했다.Webpack : 예기치 않은 토큰 : webpack.config.ts

이 내 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)

일부 웹팩 구성을 놓치셨습니까?

출처

2016-10-30 Thaadikkaaran

내가 아는 한, 귀하의 webpack 구성은 자바 스크립트 스크립트가 아니라 입력 스크립트 여야합니다. webpack 설정에 typescript를 사용하려면 먼저 typescript 컴파일러를 사용하여 typescript 파일을 js 파일로 컴파일해야합니다. Webpack은 webpack.config.ts을 유효한 javascript로 구문 분석 할 수 없기 때문에 불평합니다.

분명히 다른 옵션은 npm install ts-node입니다. webpack은 내부적으로 interpret 라이브러리를 사용하기 때문에 필요할 때 자동으로 .ts 확장자를 등록합니다. 이것이 위의 게시 된 angular2-seed 메시지가 작동하는 방식이라고 생각합니다.

출처

2016-10-30 07:56:25 dtabuenc

그렇다면 어떻게하면 [webpack.config.ts] 파일로 [this] (https://github.com/AngularClass/angular2-seed) 프로젝트를 만들 수 있습니까? – Thaadikkaaran

한 가지 방법은 tsc를 실행하는 것입니다. 수동으로 결과 .js 파일을로드하십시오. ts-node를 사용하여 잠재적 인 또 다른 방법을 포함하도록 답변을 업데이트했습니다. 이 옵션은 당신이 찾고있는 것 같습니다. – dtabuenc

그게 효과가! 업데이트 된 답변에 대해 이야기하는 의사가 있습니까? – Thaadikkaaran

Webpack : 예기치 않은 토큰 : webpack.config.ts

답변

관련 문제