Webpack + Typescript：獲取模塊解析失敗 - 爲什麼？

Question

我正在用Typescript和Webpack構建一個knockoutJs項目，並且我遇到了一個非常奇怪的問題。

其的WebPack失敗上的模塊是這樣的：

import esPlayerVM from "./components/es-player"; 
import esPlayerTemplate from "./components/es-player.tmpl.html"; 
import fsButtonVm from "./components/fullscreen-button"; 
import fsButtonHtml from "./components/fullscreen-button.tmpl.html"; 


export default class Registrator { 

    static Register() { 
     var koComp = (elName: string, vm: any, html: string) => { 
      ko.components.register(elName, { viewModel: vm, template: html }); 
     } 

     koComp('es-player', esPlayerVM, esPlayerTemplate); 
     koComp('fullscreen-button', fsButtonVm, fsButtonHtml); 
     //ko.components.register('es-player', { viewModel: esPlayerVM, template: esPlayerTemplate }); 
     //this.RegisterComponent('fullscreen-button', fsButtonVm, fsButtonHtml); 
    } 
} 

的WebPack輸出該：

ERROR in ./ComponentRegistration.ts 
Module parse failed: C:\Users\Marlon\Documents\Projects\eps-ko\src\ComponentRegistration.ts Unexpected token (10:28) 
You may need an appropriate loader to handle this file type. 
| 
|  static Register() { 
|   var koComp = (elName: string, vm: any, html: string) => { 
|    ko.components.register(elName, { viewModel: vm, template: html }); 
|   } 
@ ./Main.ts 16:0-50 

如果我刪除koComp varable，並在Register方法直接註冊的組件，的WebPack很高興。最初我有一個私人靜態函數，你可以從底部的評論中看到，但是webpack也有同樣的問題。

我已經使用Google，其他人在輸入es2016代碼時得到了這個，所以他們必須通過babel傳遞它，但是我瞄準的是es5，所以我期待我的罰款？我沒有使用任何反應的東西，如.tsx文件。

我用過ts-loader和awesome-typescript-loader，兩者都有相同的錯誤。

這裏是我的tsconfig.json

{ 
    "compilerOptions": { 
     "allowSyntheticDefaultImports": true, 
     "module": "es2015", 
     "target": "es5", 
     "moduleResolution": "node", 
     "noImplicitAny": true, 
     "sourceMap": false, 
     "importHelpers": true 
    } 
} 

本來我哈德modules設置爲commonjs，而是試圖ts-loader當我跟着他們的例子。

這裏是我的webpack.config：

const path = require('path'); 
const webpack = require('webpack'); 

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const { CheckerPlugin } = require('awesome-typescript-loader') 

// Create multiple instances 
const extractCSS = new ExtractTextPlugin('es-player.bundle.css'); 

module.exports = { 
    context: path.resolve(__dirname, './src'), 
    entry: { 
    app: './Main.ts', 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'es-player.bundle.js', 
    }, 
    //devtool: "cheap-eval-source-map", 
    resolve: { 
    extensions: ['.ts', '.tsx'] 
    },  
    module: { 
    loaders: [ 
     { 
     test: /\.tsx?$/, 
     exclude: /node_modules/, 
     loader: 'ts-loader' 
     } 
    ], 
    rules: [ 
     { 
     test: /\.css$/, 
     use: extractCSS.extract([ 'css-loader', 'postcss-loader' ]) 
     }, 
     { 
     test: /\.less$/i, 
     use: extractCSS.extract([ 'css-loader', 'less-loader', 'postcss-loader' ]) 
     }, 
     { 
     test: /\.tmpl.html?$/, 
     use: 'raw-loader' 
     } 
    ] 
    }, 
    plugins: [ 
    extractCSS 
    //new CheckerPlugin() 
    ], 
}; 

版本：

Typescript: 2.2.2 
Webpack: 2.3.3 
awesome-typescript-loader: 3.1.2 
ts-loader: 2.0.3 

我可以直接註冊他們，但我想知道發生了什麼，是造成此錯誤。

編輯

挖掘和刪除代碼後，似乎如果有出口模塊上鍵入任何方法等，這實在是奇怪的，因爲我以爲的WebPack與來自產生的transpiled JavaScript的工作參數的WebPack失敗裝載機？這推斷它正在嘗試使用原始.ts文件。

Answer 1

TL：DR WebPack不支持使用loaders和rules部分 - 必須使用其中一個。

經過數小時的調試，這是由於在webpack.config.js文件的loaders部分中定義了typescript裝入器。將其移入rules部分解決了問題。

修正webpack.config.js文件看起來像這樣：

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const { CheckerPlugin } = require('awesome-typescript-loader') 

const extractCSS = new ExtractTextPlugin('es-player.bundle.css'); 

module.exports = { 
    context: path.resolve(__dirname, './src'), 
    entry: { 
    app: './Main.ts', 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'es-player.bundle.js', 
    }, 
    //devtool: "cheap-eval-source-map", 
    resolve: { 
    extensions: ['.js', '.ts', '.tsx'] 
    },  
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: extractCSS.extract([ 'css-loader', 'postcss-loader' ]) 
     }, 
     { 
     test: /\.less$/i, 
     use: extractCSS.extract([ 'css-loader', 'less-loader', 'postcss-loader' ]) 
     }, 
     { 
     test: /\.tmpl.html?$/, 
     use: 'raw-loader' 
     }, 
     { 
     test: /\.tsx?$/, 
     exclude: /node_modules/, 
     loader: 'awesome-typescript-loader' 
     } 
    ] 
    }, 
    plugins: [ 
    extractCSS, 
    new CheckerPlugin() 
    ], 
}; 

兩個ts-loader和at-loader狀態在loaders節定義它們放在各自的github上的網頁。但是Webpack 2 docs表示將它們放入rules部分。非常令人困惑的是，至少可以說。