Question

我试图在使用typescript的中型angular2项目上实现webpack。但是当我运行webpack时，它只捆绑我在配置文件中指定的2个文件。它永远不会遍历导入树并加载其余模块。

我已经设置了相当简单的配置。我想把它打包成打字稿。然后我将继续捆绑更多文件。

当我将 import {}从＆＃34; x＆＃34; 语法更改为 var {} = require（＆＃34; x＆＃34;） 。然而，webpack工作会抛出数百个错误，因为它无法解析从@ angular2目录导入的任何内容。

如何让webpack遍历＆＃39; import＆＃39;语句并将多个文件捆绑到结果中？

我的配置如下。

webpack.config.js

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

module.exports = {
    context: path.join(__dirname, 'wwwroot/app'),
    entry: {
        'vendor': './vendor',
        'app': './main'
    },
    resolve: {
        extensions: ['', '.ts', '.js']
    },
    output: {
        path: path.join(__dirname, 'wwwroot/built'),
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loaders: ['ts', 'angular2-template-loader']
            }
        ]
    }
};

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "wwwroot/lib",
    "bin"
  ]
}

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    disableDeprecatedForms(),
    provideForms()
]).catch(err => console.error(err));

运行webpack时的控制台输出：

10% building modules 0/2 modules 2 active ...\src\wwwroot\app\main.tsts-loader: Using typescript@1.8.10 and C:\BitBucket\src\tsconfig.json
8831ms building modules
1ms sealing
1ms optimizing
0ms basic module optimization
1ms module optimization
1ms advanced module optimization
0ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
1ms module reviving
0ms module order optimization
1ms module id optimization
1ms chunk reviving
0ms chunk order optimization
1ms chunk id optimization
8ms hashing
0ms module assets processing
5ms chunk assets processing
4ms additional chunk assets processing
2ms recording
0ms additional asset processing
1ms chunk asset optimization
1648ms asset optimization
10ms emitting
Hash: 8a864382625d5d236939
Version: webpack 2.1.0-beta.21
Time: 10640ms
           Asset     Size  Chunks             Chunk Names
vendor.bundle.js  3.21 kB       0  [emitted]  vendor
   app.bundle.js  3.81 kB       1  [emitted]  app
    + 2 hidden modules

Answer 1

尝试将module从system更改为commonjs，如下所示：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs", // <--- from 'system' to 'commonjs'
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "wwwroot/lib",
    "bin"
  ]
}

Webpack 2没有加载Angular2 Typescript应用程序的导入

1 个答案: