Question

我无法让webpack捆绑我的脚本。我在app.module.ts上的这一行收到错误：@NgModule（{

我收到消息：您可能需要一个合适的加载程序来处理此文件类型。

这是我的webpack配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ["./src/ts/main.ts","./src/ts/css.ts"],
  module: {
      rules: [
        {
          test: /\.tsx$/,
          loaders: [
            {
              loader: 'awesome-typescript-loader',
              options: { configFileName: 'tsconfig.json' }
            } , 'angular2-template-loader'
          ]
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({use: 'css-loader'})
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          use: ['url-loader?limit=10000', 'img-loader']
        },
        {
          test: /\.(eot|woff2?|ttf)$/i,
          use: 'url-loader'
        }
      ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  plugins: [
    new ExtractTextPlugin("public/styles.css"),
  ],
  output: {
    filename: "public/bundle.js"
  }
}

这是tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "rootDir": "src/ts"
  },
  "angularCompilerOptions": {
    "genDir": "public/dist/js"
  },
  "exclude": [
    "node_modules",
    "**/*-aot.ts"
  ],
  "filesGlob": [
    "src/ts/**/*.ts"
  ]
}

它通过main.ts到达app.module.ts。

Answer 1

您的文件显然有ts扩展名，但您的webpack配置中的规则仅与扩展程序tsx匹配。将模式/\.tsx$\更改为/\.tsx?$\以处理这两种扩展。

    {
      test: /\.tsx?$/,
      loaders: [
        {
          loader: 'awesome-typescript-loader',
          options: { configFileName: 'tsconfig.json' }
        } , 'angular2-template-loader'
      ]
    }

模块解析失败：* .ts意外字符'@'

1 个答案: