使用Webpack编写更好的JavaScript

前言：

我知道了，JavaScript生态系统正在耗尽。存在大量的工具和框架，每个人都希望从同行的缺点中拯救你。试图学习和跟上这些工具需要花费时间和精力，而您宁愿投入到您的项目中。减少认知开销是Forestry.io理念的核心组成部分 - 我们设计了一个易于设置和使用的静态网站CMS。一个好工具不应妨碍你！

问题

编写复杂的客户端代码是痛苦的，没有一些帮助。你已经知道一个组织良好的代码库更容易理解和维护，但是当你只是将一堆文件放入标签中时，这很难完成。最重要的是，最佳实践要求您的所有代码都应该放在一个文件中。

这个空间中的许多解决方案，比如Gulp，都可以用来将一堆JavaScript文件合并为一个包。这是一个很大的改进 - 但它真的够了吗？我们剩下一个线性依赖链，并依靠全局变量在我们单独的文件之间共享信息。

更好的方法

本文将探讨为什么Webpack是绑定JavaScript应用程序的正确选择。如果您从未为您的前端资产使用过构建工具，那么Webpack是一个很好的开始。如果您已经习惯使用像Gulp这样的任务运行者，那么将资产绑定分配给Webpack将为您提供更复杂的组织和依赖管理策略。

Webpack 可以帮助你编写更好的代码，并且可以让你专注于制作优秀的软件。

Webpack与Gulp

也许你之前听说过这个：Gulp是一个任务运行者，Webpack是一个模块打包器。这实际上意味着什么？

Gulp是一款出色的自动化工具。它允许开发人员使用JavaScript设置复杂的文件处理管道，并将其作为简单的命令运行。但是，当涉及到打包JavaScript应用程序时，前面提到的文件粉碎大概就像它可以去的一样。如果文件A中的代码依赖于文件B中的代码，则需要告诉Gulp首先包含文件A. 这可以直接在Gulp配置中完成，也可以通过维护一个单独的清单文件用于资产构建器之类的插件。随着您添加更多文件和您的依赖关系树的增长，这可能会变成一件难事。

复杂的依赖关系解决方案是Webpack的专长。您指定一个文件作为您的应用程序的入口点，Webpack将递归处理您代码中的模块导入以构建依赖关系图。一切完成后，Webpack会将您的JavaScript放在一个包文件中。没有必要告诉Webpack它应该把文件放在一起的顺序; 它通过阅读你的代码来计算出来。

Gulp的依赖关系解析能力有限，需要您明确定义依赖关系链。Webpack使用内置于代码中的依赖性逻辑。

学习交流前端方面的技术，打算深入了解这个行业的朋友，可以加下小编的前端学习裙330+336+289=邀请码（寂静）

每天都有大咖给大家分享前端学习知识和路线方法，欢迎小伙伴加入交流

编写模块化代码

为了让Webpack发挥它的魔力，你的代码需要被编写成JavaScript模块。JavaScript模块是一个JavaScript文件，可导出用于代码其他部分的功能块。然后其他文件中的代码可以导入该模块以便使用它。

Webpack支持模块配置的两个标准：EcmaScript和CommonJS。以下示例演示如何配置定义的模块，hello.js以便通过以下app.js每个标准中指定的文件加载：

EcmaScript模块语法

EcmaScript标准使用export和import关键字。

CommonJS模块语法

CommonJS标准module.exports通过调用require()函数来分配导出的代码并导入它。

如果您不确定使用哪种语法，请坚持编写EcmaScript模块。了解这两个选项仍然有帮助，因为您可能会遇到使用CommonJS语法的第三方库，因此您需要使用require()它们将它们导入到代码中。

直观的依赖关系解决方案

Webpack的依赖性解析是直观的，因为您不需要查看Webpack配置以了解正在发生的事情。你只需要知道入口点在哪里，这通常是显而易见的。这对您项目的新贡献者很有帮助：他们可以理解代码中的关系，而无需了解构建配置的详细信息。

配置Webpack

让我们设置最简单的配置来理解Webpack的核心组件。从设置以下文件结构开始：

src/

app.js

webpack.config.js

默认情况下，Webpack会在名为的文件中查找配置webpack.config.js。接下来，让我们通过运行以下终端命令来安装Webpack模块：

npm init -y

npm install --save-dev webpack webpack-cli

现在Webpack安装在项目中，

webpack.config.js

在文本编辑器中打开并添加以下代码：

这就是您需要的一个简单的Webpack配置：定义入口点和输出文件。Webpack需要输出的绝对路径，所以我们需要path在运行时使用模块来解决这个问题。

然后我们可以通过调用CLI命令来运行Webpack：

./node_modules/webpack-cli/bin/webpack.js

这将读取src/app.js并编译成distndle.js。一旦命令完成，我们的项目应该如下所示：

dist/

bundle.js

src/

app.js

package.json

webpack.config.js

使用NPM脚本

简化构建CLI的常用策略是将自定义脚本添加到文件中的scripts属性中package.json。然后您可以使用这些脚本来调用npm run SCRIPT_NAME。

package.json在文本编辑器中打开文件并找到scripts部分：

默认配置package.json了一个调用的脚本test，它只是返回一条错误消息。我们再添加两个：

现在我们可以通过简单的调用来运行我们的Webpack构建npm run build。我们还添加了一个watch将--watch标志传递给的脚本webpack-cli。当用这个标志调用时，Webpack会监视我们的文件并在检测到变化时自动运行构建。

恭喜！您现在正在编写模块化JavaScript，并且您有一个构建过程，可以将它们放在一起。

下一步

我们仅仅在这里描述了这一点：Webpack的功能远不止于此，但捆绑JavaScript模块是其核心功能。下一次，我们将探索Webpack的加载器和插件，以优化您的JavaScript包，并使用开发服务器实时重新加载浏览器。