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

Question

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

Answer 1

如果您是 webpack 新手，请观看此webpack 视频教程。

\n\n

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

\n\n

步骤 1：- 使用 node 命令安装 webpack。

\n\n

npm install -g webpack\n

\n\n

第 2 步：- 创建“webpack.config.js”并定义您想要的捆绑方式。该文件是一个 webpack 配置文件，它定义了捆绑的路线图。例如，在下面的配置中，我创建了三个捆绑包。“启动”、“供应商模块”和“客户模块”。这些包将被编译到“dist”目录中。如果您是 webpack 新手，请阅读这篇webpack 文章

\n\n

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

\n\n

步骤 3：- 转到您创建此文件的文件夹并执行 webpack，如果您想压缩该文件，可以使用“-p”选项。

\n\n

webpack -p\n

\n\n

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

\n\n

\n\n

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

\n\n

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

\n\n

步骤1：\xe2\x80\x93 获取\xe2\x80\x9ces6-promise-loader\xe2\x80\x9d 并替换Systemjs

\n\n

将 systemjs 替换为 es6 Promise 加载器。所以做一个 NPM 并得到它。

\n\n

第 2 步：- 安装节点类型

\n\n

npm install -save @types/node\n

\n\n

步骤 3：- 您的动态模块加载器代码现在也将更改。所以路由代码就变成了如下所示

\n\n

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

\n\n

再次执行 webpack 来捆绑文件。如果您看到捆绑输出，您可以看到 0.bundle.js 、 1.bundlejs ，这表明您的延迟加载捆绑运行良好。

\n\n

\n\n

快乐的捆绑...

\n