使用 ts-loader 时 Webpack 2 不起作用答案

【问题标题】：Webpack 2 won't work when using ts-loader使用 ts-loader 时 Webpack 2 不起作用
【发布时间】：2017-08-21 15:35:31
【问题描述】：

我一直在设置一个基本的 Angular 2（打字稿）应用程序，它使用 Webpack 2 进行捆绑等。

我的问题是，当我使用 ts-loader 处理 typescript (.ts) 文件时，会遇到很多错误。我怀疑但不完全确定，这些错误与 ts-loader not 不包括 node_modules 目录有关，即使我指定它在 webpack 配置中排除它。

我只是希望能够设置我的 webpack 配置（和我的应用程序），以便可以转译 typescript 并且可以正确地将应用程序与 webpack 捆绑。请帮忙。

Webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: './src/main.ts',
    output: {
    filename: './dist/bundle.js',
},
resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well
},
module: {
    loaders: [{
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
    }]
},
plugins: [
    new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
    __dirname
),
]
};

package.json

{
  "name": "tiptip-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack -d --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/core": "2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/platform-browser": "2.4.6",
    "@angular/platform-browser-dynamic": "2.4.6",
    "@angular/platform-server": "2.4.6",
    "@angular/router": "3.4.6",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "jasmine-core": "^2.5.2",
    "reflect-metadata": "^0.1.9",
    "rxjs": "5.0.2",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "source-map-loader": "^0.2.0",
    "ts-loader": "^2.0.3",
    "typescript": "^2.2.0",
    "typings": "^2.1.0",
    "webpack": "^2.2.0"
  }
}

运行“npm run build”后的错误消息

【问题讨论】：

标签： angular typescript webpack webpack-2

【解决方案1】：

这不是 webpack 问题，而是 TypeScript 问题。 Webpack 正确地忽略了 node_modules 但 TypeScript 抱怨因为它不知道 Map 或 Set 的类型。这些是 ES6 特性，如果你将 compilerOptions 中的 target 设置为 es5，它不会将这些包含在编译中，因此不知道它们的类型。来自compiler options 文档：

注意：如果未指定--lib，则会注入默认库。注入的默认库是：
► 对于 --target ES5：DOM,ES5,ScriptHost
► 对于 --target ES6：DOM,ES6,DOM.Iterable,ScriptHost

您可以将lib 选项设置为使用es6（或任何更高版本，例如es2017）：

"lib": ["es6", "dom"]

【讨论】：

这很棒。我希望他们使 Webpack 2 文档更加清晰（和详细）。