如何使用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这是签署您的延迟加载捆绑运作良好。

快乐捆绑...