webpack 文件打包

最新推荐文章于 2024-06-27 10:11:01 发布

书和咖啡

最新推荐文章于 2024-06-27 10:11:01 发布

阅读量405

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/ivenqin/article/details/116059036

版权

这篇博客介绍了如何使用webpack进行文件打包。从创建项目结构，到设置入口文件和打包命令，详细阐述了单个文件及多个文件的打包过程。通过示例展示了如何引入并打包多个模块，解释了webpack如何通过唯一id管理模块。

摘要由CSDN通过智能技术生成

上一节中，我们已经安装好了 webpack ，本节我们来学习何使用 webpack 进行文件打包。

使用webpack打包文件

要打包文件，首先我们需要初始化一个项目，前面我们已经创建好了一个 xkd_webpack 的项目，并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules 文件夹，如下所示：

在实际项目中，为了方便管理许多文件，我们可能需要创建一个 src 文件夹存放入口文件等开发文件，然后创建一个 dist 文件夹存放最终打包的文件，还有其他类型的文件，为了方便管理我们也会放在同一个目录下。

但是因为我们这里只是举例说一下如何使用 webpack 打包文件，所以我们直接项目根目录下，创建一个静态页面 index.html 和一个 JS 的入口文件 index.js 文件，文件名称是我们自定义的，如果你想使用其他的名称也是可以的。

下面是 index.html 文件的内容：

<html>
    <head>
        <meta charset="utf-8">
        <title>webpack入门</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js"></script&g