首页 文章

使用ts-loader时，Webpack 2将无法工作

提问于
浏览 次
0

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

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

我只是想能够设置我的webpack配置（和我的应用程序），以便可以转换打字稿，并且可以将应用程序与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"
  }
}

Error messages after running 'npm run build'
enter image description here

angular typescript webpack webpack-2

1 回答

  • 3

    这不是Webpack问题，而是TypeScript问题 . Webpack正确地忽略 node_modules 但TypeScript抱怨，因为它不知道 Map 或 Set 的类型 . 这些是ES6功能，如果您将 compilerOptions 中的 target 设置为 es5 ，它就会知道它们的类型 . 来自compiler options文档：

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

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

    "lib": ["es6", "dom"]
    回复于

相关问题