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部分。非常令人困惑的是，至少可以说。