携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
Webpack 竞争产品
现在你可能会问，Webpack 是不是唯一的选择呢？当然不是，Webpack 也有竞争产品。
下面我们来看 Webpack、parcel以及 rollup之间较量。
parcel：号称是零配置，用户一般无需做其他的配置，开箱即用。如果你想要构建一个简单的应用，并且让它快速的运行起来，你可以使用 parcel。
rollup：用标准化的格式来编写代码，比如 ES6，通过呢减少无用的代码来尽可能的缩小胞的体积，一般只能用来打包 JS。如果你想要构建一个类库，只需要倒入很少的第三方的库，那你可以使用 rollup 。
Webpack：如果你想要构建一个复杂的应用，并且想集成很多的第三方的库，并且还要拆分代码，还要使用静态的资源文件，还要支持 commonjs 、ESModule 等等，那只能使用 Webpack。
Vite：从开发、编译、发布、demo 几乎全部都使用的是 Vite 来完成，Vite 这种基于 ESModule 构建方式日益的受到了用户的青睐，不仅可以按需编译，热模块的更新等等，它还有其他的丝滑的开发体验，以及和 Vue3 的完美结合。
那按照这样的说法，也许有人会问了，是不是 Webpack 就被 Vite 取代了呢？其实也不是，Webpack、Vite 作为前端热门的工程化工具，他们各自有各自的使用场景，其实并不存在取代的说法。
Webpack 开发准备
在进入 Webpack 之前，我们先用最原始的方法来构造一个 Webpack 应用，为开发做准备。
新建 /src/hello.js 文件，实现在浏览器控制台输出 ”Hello Webpack！”。
function hello(){
console.log('Hello Wabpack！')
}
我们实现在另外一个 JS 文件里边去调用 hello.js 中 hello 函数，因此新建 /src/index.js 文件，这个文件中我们直接调用 hello.js 文件中 hello 函数。
hello()
我们想要这两个 JS 文件运行，我们需要在项目的根目录下面创建一个 index.html 文件，通过 script 标签加载 index.js 和 hello.js 这两个文件。
<script src="./src/index.js"></script>
<script src="./src/hello.js"></script>
打开浏览器，在浏览器通过文件路径访问 index.html，可以看到在浏览器控制台输出错误信息：hello is not defined。
说明在 index.js 文件中调用 hello.js 方法没有生效，原因是在 index.html 文件中，两个JS 的引用顺序问题。这里我们验证前面提到在 HTML 文件中引入 JS 文件顺序问题。
调整 index.html 文件中引入 JS 顺序。
<script src="./src/hello.js"></script>
<script src="./src/index.js"></script>
再次刷新浏览器，可以看到在浏览器的控制台输出“Hello Webpack !”。
思考一个问题，在这里只有两个 JS 文件，但是在我们实际项目中，引入 JS 非常多，我们需要手工的进行 JS 顺序的调整，给我们开发者的心智负担就非常的重，如何解决这个问题呢？这就需要使用到我们的构建工具。
