15分钟学会Webpack

Posted 2021-04-29 H5开发集锦

构建工具已经成为Web开发的一个组成部分，主要是由于javascript应用程序日益复杂。 Bundlers允许我们打包，编译和组织现代Web项目所需的许多资源和库。

   在本教程中，我们将介绍webpack，一个强大的开源包和预处理器，它可以处理各种不同的任务。我们将展示如何编写模块，绑定代码以及使用某些加载程序插件。 本教程是为webpack初学者设计的，但建议有一些JavaScript知识的人学习。

为什么要学习webpack？

    像web开发的任何其他方面一样，使用哪个构建工具没有一个标准。现在，开发人员必须在webpack，Gulp，Browserify，NPM脚本，Grunt等10个之间选择。 这里有很多深入的比较，但是所有这些工具都非常相似，所以大部分时间都归结为个人偏好和你正在开展的项目。

   以下是帮助你确定是否使用Webpack一些优缺点：

优点：

   .非常适合使用单页应用

   .接受require()和import()模块语法

   .允许非常高级的代码分割

   .适合React，Vue.js和类似的框架进行更快的开发的热重新加载

   .根据2016年JavaScript调查，它是最流行的构建工具

缺点：

   .不适合网页开发初学者

   .首先使用CSS文件，图像和其他非JS资源令人困惑

   .文档应该做得更好

   .变化很大，即使是2016年的大部分教程已经过时了

1.安装

    安装webpack的最简单的方法是使用包管理器。我们将会用npm，但可以随意使用Yarn或其他更酷的替代品。在这两种情况下，你都需要在机器上安装Node.js和package.json。

    最好在本地安装（不带-g标签）。 这将确保在你的项目上工作的每个人都具有相同版本的Webpack。

    

    一旦安装完成，最好通过Node.js脚本运行webpack。将这些代码行添加到你的package.json中：

    

    现在通过终端调用npm运行构建，可以使webpack打包文件（-p选项代表生产并最小化的打包代码）。 运行npm run watch会启动一个进程，当任何一个文件发生变化时，会自动重新打包文件。

   设置的最后一部分是告诉webpack要绑定哪些文件。 建议的方法是创建一个配置文件。

2.Webpack 配置文件

    这里我们将以最基本的形式查看配置文件，但不要让它迷惑你 - webpack配置文件相当强大，项目间有很大的不同，在某些情况下可能会变得超级复杂。

    在项目的根目录中添加一个名为webpack.config.js的文件。

    webpack.config.js

    

   入口选项告诉webpack哪个是主要的JavaScript文件。 配置入口有许多不同的策略，但在大多数情况下，单个入口就足够了。

   在输出中，我们指定了要打包的名称和路径。 运行webpack之后，我们将所有的JavaScript都放在一个名为bundle.js的文件中。 这是我们将在html中链接的唯一脚本文件：

    

    这个设置应该足以让我们上手。之后我们将添加一些更多的东西，但首先让我们看看模块如何工作。

3.Webpack 模块

    Webpack提供了多种使用模块的方法，大部分时间你可以随意选择任何一种。对于本教程，我们将使用ES6导入语法。

我们要添加一个向用户打招呼的模块。创建一个名为greeter.js的文件，并导出一个简单的函数：

   greet.js

   

   如果你回看配置文件index.js，要使用这个模块，我们必须导入它，并在我们的入口点调用它。

   index.js

   

   现在，当我们用npm运行构建运行绑定，并在浏览器中打开HTML时，我们看到：

   

   

     入口点和greeter模块被编译成一个名为bundle.js的文件，它由浏览器执行。 以下是目前为止发生的一个简单流程图：

    

4.需要的库

   我们希望我们的应用可以指定当用户打招呼时星期几。为此，我们将通过直接将moment.js导入到我们的模块中。

   首先我们需要通过npm安装这个库：

   

   然后在问候模块中，就像前面介绍本地模块一样，简单地导入库：

   

   在我们再次绑定应用更改后，在浏览器控制台中将会有以下消息：

   

    我们的流程图现在如下所示：

    

    注意：还有其他更先进的技术来引用库，但不在本文的范围之内。你可以在这里阅读更多关于他们的信息。

5.加载器

    加载器是webpack在打包过程中执行任务的方式，并以某种方式对文件进行预处理或后处理。例如，他们可以编译TypeScript，加载Vue.js组件，渲染模板等等。大多数加载器都是由社区撰写的，有关流行加载器的列表，请点击这里。

   假设我们要在项目中添加一个linter来检查我们的JS代码是否有错误。我们可以通过包含JSHint加载器来实现这一点，这将捕获各种不良的做法和代码异味。

   首先我们需要安装JSHint和webpack JSHint loader：

   

   然后，我们将添加几行代码到webpack配置文件。这将初始化加载程序，告诉它要检查什么类型的文件，以及要忽略哪些文件。

   greeter.js

   

   现在，当webpack启动时，它会向我们显示终端中的警告列表（忽略）：

   

   由于moment.js位于node_modules文件夹中，因此不受JSHint加载器的限制：

   

延伸阅读

    最后我们总结一下webpack入门！由于这是初学者的一个教程，我们尝试仅涵盖webpack最有用和必须知道的概念。我们希望本教程有所帮助，不要太混乱，并且如标题所说，限制在15分钟内。

    在不久的将来，我们计划在本教程中添加第二部分，解释如何使用CSS模块和其他更高级的功能。在此期间，如果你想了解更多关于webpack（还有更多），我们建议您查看这些不错的资源：

   .webpack.js.org -该项目的官方网站，有许多指南和文档。

   .Awesome webpack-webpack资源策划清单。

   .Webpack 2–A full tutorial- 接近两个小时的免费视频教程。

   .Webpack Examples-各种Webpack配置列表。

英文原文：http://tutorialzine.com/2017/04/learn-webpack-in-15-minutes/ 
译者：( Ĭ ^ Ĭ )