我正在尝试在使用打字稿的中等大小的angular2项目上实现webpack。但是,当我运行webpack时,它只会捆绑我在配置文件中指定的2个文件。它从不遍历导入树并加载其余模块。
我已经建立了一个相当简单的配置。我想让它只是捆绑打字稿开始。然后,我将继续捆绑更多的文件。
当我将import {}从“ x”语法更改为var {} = require(“ x”)时。webpack可以工作,但是会抛出数百个错误,因为它无法解析从@ angular2目录导入的任何内容。
如何使webpack遍历“导入”语句并将多个文件捆绑到结果中?
我的配置如下。
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"
]
}
主要
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 [email protected] 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
尝试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"
]
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句