时间戳

首页 > 解决方案 > 捆绑多个js文件

javascript - 捆绑多个js文件

问题描述

在使用 webpack 做出反应时，每个 js 文件都捆绑到一个 bundle.js 中，例如，对于我的普通 html、css、js 应用程序，我有 6 个库。例如考虑

我正在使用 jquery 和 bootstrap min 版本。所以如果我引用两个文件，请求将是两个。所以我怎样才能把它变成一个文件。所以会有一个请求。

就像我检查文件大小大约以 kb 为单位并且请求在不到 1 或 2 秒内处理时一样，就像 chrome 开发工具显示加载时间一样，它也并行加载这两个文件。

但是我如何使用 webpack 捆绑这两个库并获得一个可以在我的应用程序中引用的文件。

我是 webpack 的初学者

标签： javascriptwebpack

解决方案

您需要在入口点文件中导入它们，Webpack 将处理捆绑。当您使用过 React 时，我假设您具有基本的命令行技能。

您可以阅读捆绑 Lodash 的入门指南，就像您尝试捆绑 jQuery 和 Bootstrap 一样。

首先安装，确保您使用npm（或yarn，如果您愿意）安装 jQuery、Bootstrap 和任何其他库：

# Install Webpack as a dev dependency
npm install webpack webpack-cli --save-dev

# Install dependencies (I've added Popper.js as Bootstrap requires it)
npm install jquery bootstrap popper.js

创建一个名为src的文件夹，并在其中创建一个名为index.js. 这是您的入口点，除非配置不同，否则 Webpack 将查找此文件。像这样导入库：

import $ from 'jquery'
import 'bootstrap'

// Do something with jQuery
$(document).ready(() => console.log('Hello world!'))

然后使用npx 运行 Webpack ：

npx webpack

main.js应在dist包含捆绑代码的文件夹中创建一个名为的文件。这是您的输出文件。您可以在 HTML 文件中使用<script>标签来加载此 JavaScript：

<!-- assuming your index.html is in the dist folder -->
<script src='main.js'></script>

到达这里后，您可以探索更高级的东西，例如单独导入 Bootstrap 组件、缩小代码、多个包、转译 TypeScript 等。

您可能需要尽快添加Webpack 配置文件，因为使用零配置模式只能完成这么多工作。

推荐阅读