如何在Angular2 + Webpack中爲每個模塊創建一個單獨的文件？

我按照https://angular.io/docs/ts/latest/guide/webpack.html中的步驟操作，並能夠正常工作。如何在Angular2 + Webpack中爲每個模塊創建一個單獨的文件？

但我想要的是每個模塊都有一個單獨的文件。

我嘗試在每個模塊的webpack.common.js中添加一個新的入口點，但是在構建應用程序時它會返回錯誤。

module.exports = { 
    entry: { 
     'polyfills': './src/polyfills.ts', 
     'vendor': './src/vendor.ts', 
     'app': './src/main.ts', 
     'test': './src/app/test/test.module.ts' 
    } 
    ..... 
}

有沒有辦法做到這一點？

來源

2016-11-17 PrinceG

可以使用的WebPack的code-splitting與路由的配置可angular2的loadChildren方法。像，

{ 
    path: 'yourroute', loadChildren:() => require.ensure('./yourmodule', (comp: any) => { 
     return comp.default; 
    }), 
    .... 
    ... 
}

這裏，yourmodule會被加載on-demand當請求yourroute路線。

來源

2016-11-17 07:38:04 Thaadikkaaran

我試過這個時遇到錯誤。 '屬性'確保'在類型'NodeRequire'上不存在。 '。任何想法如何解決？ – PrinceG

這是webpack編譯錯誤嗎？ – Thaadikkaaran

我想這是包括類型問題..你可能已經使用了requirejs d.ts和node.d.ts.刪除需要d.ts只使用node.d.ts – Thaadikkaaran

要使用多個入口點，您可以將對象傳遞給入口選項。每個值都被視爲入口點，鍵表示入口點的名稱。

當使用多個入口點時，您必須覆蓋默認的output.filename選項。否則，每個入口點將寫入相同的輸出文件。使用[name]獲取入口點的名稱。

如

entry: { 
    polyfills: './src/polyfills.ts', 
    vendor: './src/vendor.ts', 
    app: './src/main.ts', 
    test: './src/app/test/test.module.ts' 
} 
output: { 
    path: path.join(__dirname, "dist"), 
    filename: "[name].entry.js" 
}

嘗試，沒有在左側的報價。同時，記下輸出

的更多信息，請參閱Webpack multiple entry points

來源

2016-11-17 07:27:33

如何在Angular2 + Webpack中爲每個模塊創建一個單獨的文件？

回答

相關問題