如何使用webpack模块捆绑器创建单个js文件包 - 角
我是angularjs的新手,在我的项目中有很多依赖关系的js文件,这影响了我为每个文件执行项目的性能,因此存在单独的请求,因此与如此多的文件,我已经结束了很多请求..我正在寻找使用webpack创建这些文件的单个包...我正在寻找使用webpack创建单个文件的步骤?如何使用webpack模块捆绑器创建单个js文件包 - 角
假设您使用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这是签署您的延迟加载捆绑运作良好。
快乐捆绑...
您使用的角度或Angularjs?这是一个非常重要的区别。你正在使用这两个标签,但我没有假设你同时使用了两个框架。 –
虽然张贴它建议我添加一些关键字来添加自动完成...我的问题是更具体到angular..let我知道任何更改来纠正它 –
您可以通过编辑您的问题更改标签。删除不符合您问题的标签。 'angular'标签仅用于角度版本2+,而'angularjs'标签用于角度版本1.X。 –