2016-01-20 64 views
1

我想做一個簡單的Webpack版本的Angular 2 5 min quickstart tutorial如何使webpack排除angular2模塊

由於它的may be problematic to just let Webpack autmatically include all modules needed,我包括直接來自html的供應商腳本,幾乎就像教程,除了我不需要system.js的webpack安裝程序,所以我不包括,但我確實需要的 「bundle.js」,它的WebPack生產:

<body> 

<my-app></my-app> 

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="bundle.js"></script> 

</body> 

如果我使用這個配置對的WebPack,我幾乎都達到我的目標:

module.exports = { 
    entry: './src/boot.ts', 
    output: { 
    filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['', '.ts', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { test: /\.ts$/, exclude: [/angular2/], loader: 'ts-loader' } 
    ], 
    noParse: [/angular2/] 
    } 
}; 

沒有noParse,會的WebPack包括223個模塊,它本身就是它應該的,但出於某種奇怪的原因這會導致一個有問題的巨大捆綁文件(請參閱上面的鏈接)。隨着noParse我快達到我的目標,但不是完全,但它仍然包括我不想的WebPack包括兩個角模塊:

[0] ./src/boot.ts 195 bytes {0} [built] 
    [1] ./~/angular2/platform/browser.js 13.1 kB {0} [built] 
    [2] ./src/myapp/components/myapp.ts 1.27 kB {0} [built] 
    [3] ./~/angular2/core.js 4.54 kB {0} [built] 

我不想的WebPack包括任何角2個模塊(如我已經包括了這一點)。這可能是因爲我的兩個自制模塊使用了這兩個模塊。但我怎麼能讓webpack忽略這些?我noParse(或exclude)是沒有幫助這裏...

+0

參考此鏈接。儘管它使用Visual Studio 2015,但任何編輯器都可以使用相同的技術http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/ –

回答

3

你有沒有看看IgnorePluginhttps://webpack.github.io/docs/list-of-plugins.html#ignoreplugin

你所說的可以通過做這樣的事情來實現:

var webpack = require("webpack"); 
module.exports = { 
    // ... 
    plugins: [ 
    new webpack.IgnorePlugin(/angular2$/) 
    ] 
}; 
+0

的確如此!必須刪除'$'(在'angular2'之後),但現在我可以刪除我的'noParse'(和我的'排除'嘗試)。再次感謝你@frishi,爲你的幫助:) – EricC

+0

不客氣。 – frishi