angular - 如何使用 webpack 模块打包器创建单个 js 文件包 - Angular

Question

我是 angularjs 的新手，在我的项目中，我有这么多依赖项 js 文件，这影响了我对每个文件的项目性能有单独的请求，因此有这么多文件我最终收到了很多请求..我正在寻找使用 webpack 创建这些文件的单个包...我正在寻找使用 webpack 创建单个文件的步骤？

Answer 1

如果您是 webpack 的新手，请阅读此 webpack video tutorial .

假设您使用的是 Angular 2/4/5，您可以按照以下步骤操作。

第 1 步:- 使用 node 命令安装 webpack。

npm install -g webpack

第 2 步:- 创建“webpack.config.js”并定义您要如何打包。这个文件是一个 webpack 配置文件，它定义了你的打包路线图。例如，在下面的配置中，我正在创建三个包。 “启动”、“vendor 模块”和“客户模块”。这些包将被编译到“dist”目录。如果您是 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 -p

如果一切顺利，您应该会看到如下所示的内容。您可以看到他按照上一步中定义的“webpack”配置文件的路线图创建了三个包。



第 4 步:- 在您的 Angular 索引页面中，删除所有 JS 文件并添加对 dist 文件夹中文件的引用。请注意，主 angular 页面只需要引用 startup.js，其他模块将按需加载。

如果您使用 systemJS 使用延迟加载，则还需要以下三个步骤。

第 1 步:– 获取“es6-promise-loader”并替换 Systemjs

用 es6 promise 加载器替换 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 ，这表明您的延迟加载捆绑运行良好。



快乐捆绑...