如何使用webpack模塊捆綁器創建單個js文件包 - 角

Question

我是angularjs的新手，在我的項目中有很多依賴關係的js文件，這影響了我爲每個文件執行項目的性能，因此存在單獨的請求，因此與如此多的文件，我已經結束了很多請求..我正在尋找使用webpack創建這些文件的單個包...我正在尋找使用webpack創建單個文件的步驟？

Answer 1

假設您使用Angular 2/4/5，您可以按照以下步驟操作。

第1步： - 使用節點命令安裝webpack。

npm install -g webpack 

第2步： - 創建「webpack.config.js」並定義要如何捆綁。該文件是定義捆綁路線圖的webpack配置文件。例如在下面的配置中，我創建了三個捆綁包。 「啓動」，「供應商模塊」和「客戶模塊」。這些包將被編譯到「dist」目錄。如果要壓縮你可以使用「-p」選項的文件去你做出這個文件的文件夾，並執行的WebPack - ：如果你是新來的WebPack通過這個webpack article

var path = require('path'); 

module.exports = { 
    entry: { 
     CustomerModule: "./Modules/CustomerModule.js", 
     SupplierModule: "./Modules/SupplierModule.js", 
     Startup: [ "./node_modules/core-js/client/shim.min.js", 
        "./node_modules/zone.js/dist/zone.js", 
        "./node_modules/reflect-metadata/Reflect.js", 
        "./Startup.js" 
        ] 
    }, 
    output: { 
     path: path.join(__dirname, "dist"), 
     publicPath: "/dist/", 
     filename: "[name].bundle.js" 
    } 
}; 

第3步。

webpack -p 

如果一切順利，您應該看到如下所示的內容。您可以看到他已經根據上一步中定義的「webpack」配置文件的路線圖創建了三個捆綁包。

第4步： - 在你的角度索引頁，刪除所有的JS文件，並添加引用從DIST文件夾中的文件。請注意，主角頁面只需要引用startup.js，其他模塊將按需加載。

如果您使用systemJS進行延遲​​加載，則還需要以下三個步驟。

第1步： - 獲取「ES6-承諾裝載機」和替換Systemjs

替換ES6承諾裝載機systemjs。所以做一個NPM並得到它。

第2步： - 安裝節點類型

npm install -save @types/node 

第3步： - 你的動態模塊加載程序代碼也將改變現在。所以路由代碼變得東西如下圖所示

export const MainRoutes = [ 
    { path: 'Customer', loadChildren:() => require('es6-promise- 
loader!../Modules/CustomerModule')('CustomerModule')}, 
    { path: 'Supplier', loadChildren:() => require('es6-promise- 
loader!../Modules/SupplierModule')('SupplierModule') }, 
    { path: '', component: HomeComponent }, 
    { path: 'Shell.html', component: HomeComponent }, 
    { path: 'Help', component: HelpComponent, outlet: "helpoutlet" } 


]; 

的WebPack再次執行捆綁的文件。如果你看到捆綁輸出可以看到0.bundle.js，1.bundlejs這是簽署您的延遲加載捆綁運作良好。

快樂捆綁...