请选择 进入手机版 | 继续访问电脑版
创作

#楼主# 2020-8-8

跳转到指定楼层
本帖最后由 泡沫 于 2020-8-8 20:36 编辑

主要由于JavaScript应用程序的复杂性不断提高,构建工具已成为Web开发不可或缺的一部分。捆绑软件使我们可以打包,编译和组织现代Web项目所需的许多资产和库。

在本教程中,我们将介绍webpack,它是一个功能强大的开源打包程序和预处理器,可以处理各种各样的任务。我们将向您展示如何编写模块,捆绑代码以及使用某些加载程序插件。本教程专为Webpack初学者设计,但建议您具有一些JavaScript知识。




为什么要使用webpack?
与Web开发的其他任何方面一样,没有使用哪种构建工具的标准。现在,开发人员必须在webpack,Gulp,Browserify,NPM脚本,Grunt和其他10个之间进行选择。那里有许多深入的比较,但是所有这些工具都非常相似,因此大部分时间取决于个人喜好和您正在从事的项目。

以下是一些利弊,可帮助您确定webpack是否适合您:

优点:

  • 非常适合使用单页应用程序
  • 接受require()import模块语法
  • 允许进行非常高级的代码拆分
  • Hot Reload可以使用React,Vue.js和类似框架更快地进行开发
  • 根据2016年JavaScript调查,最受欢迎的构建工具


缺点:

  • 不适合Web开发的初学者
  • 起初,使用CSS文件,图像和其他非JS资源令人困惑
  • 文档可能更好
  • 变化很大,即使大多数2016年教程已经过时




1.安装
安装Webpack的最简单方法是使用软件包管理器。我们将使用npm,但可以随时使用Yarn或其他髋关节替代品。在这两种情况下,您都需要在计算机上安装Node.js和package.json

最好在本地安装(不带-g标签)。这将确保从事您的项目的每个人都具有相同版本的webpack。

npm 安装 webpack --save-dev
安装完毕后,最好通过Node.js脚本运行webpack。将这些行添加到package.json中:

  1. // ...     “ scripts”:{         “ build”:“ webpack -p”,         “ watch”:“ webpack --watch”    },// ...
复制代码

现在,通过npm run build从终端调用,我们可以使webpack捆绑我们的文件(该-p选项代表生产,并减少了捆绑的代码)。运行npm run watch将启动一个过程,当其中任何一个文件更改时,该文件会自动捆绑我们的文件。

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

2. Webpack配置文件
在这里,我们将以最基本的形式查看配置文件,但请不要让它愚弄您-Webpack配置文件功能非常强大,因项目而异,并且在某些情况下可能会变得非常复杂。

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

webpack.config.js
  1. var path = require('path');模块 .exports = {   入口:'./assets/js/index.js',   输出:{     文件名:'bundle.js',     路径:path.resolve(__ dirname,'dist')  }};
复制代码

条目选项告诉的WebPack这是我们主要的JavaScript文件。配置入口点有许多不同的策略,但是在大多数情况下,一个入口就足够了。

输出中,我们指定包的名称和路径。运行webpack之后,我们将所有JavaScript都存储在一个名为bundle.js的文件中。这是我们将在HTML中链接的唯一脚本文件:

< 脚本 src = “ ./dist/bundle.js” ></ 脚本 >
此设置应该足以让我们开始。稍后,我们将向其中添加更多内容,但首先让我们看看模块是如何工作的。



3. Webpack模块
Webpack提供了多种使用模块的方式,大多数情况下,您可以随意使用任何一种。在本教程中,我们将使用ES6 import语法。

我们想要添加一个迎接用户的模块。我们创建一个名为greeter.js的文件,并使其导出一个简单的函数:

greeter.js
功能 映入眼帘() {     console .log('祝您有美好的一天!');};出口 默认问候
要使用此模块,我们必须将其导入并在入口处调用它,如果您回头看一下配置文件,它就是index.js。

index.js
从 './greeter.js' 导入 greet ;console .log(“我是入口点”);迎接();
现在,当使用来运行捆绑程序时npm run build,并在浏览器中打开HTML时,我们将看到:




我们的入口点和greeter模块被编译到一个名为bundle.js的文件中,并由浏览器执行。这是到目前为止发生的事情的简单流程图:

v2-9f2374ecb4f0d186e6c40e03522d191a_720w.png





4.要求图书馆
我们希望我们的应用指定与用户打招呼的星期几。为此,我们将通过将moment.js直接导入到我们的greeter模块中来使用它。

首先,我们需要通过npm安装该库:

npm 安装时刻--save
然后,在问候模块中,我们完全像在上一点中导入本地模块一样导入库:

greeter.js
从 “瞬间” 导入瞬间;功能 映入眼帘() {     var day = moment()。format('dddd');    console .log('祝您有个美好的一天+ + + !');};出口 默认问候
再次捆绑以应用更改后,在浏览器控制台中,我们将显示以下消息:




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



注意:还有其他一些更高级的技术来包含库,但是它们不在本文讨论范围之内。



5.装载机
加载程序是webpack在捆绑过程中执行任务并以某种方式对文件进行预处理或后处理的方式。例如,他们可以编译TypeScript,加载Vue.js组件,渲染模板等等。大多数装载机是由社区编写的。

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

首先,我们需要同时安装JSHint和webpack JSHint加载器:

npm install jshint jshint-loader --save-dev
后记,我们将在webpack配置文件中添加几行。这将初始化加载程序,告诉它要检查的文件类型以及要忽略的文件。

webpack.config.js
  1. var path = require('path');模块 .exports = {   入口:'./assets/js/index.js',   输出:{     文件名:'bundle.js',     路径:path.resolve(__ dirname,'dist')  },  //添加JSHint加载  模块:{     规则:[{       测试:/\.js$/,//在文件中的所有的.js运行装载机       :排除/ node_modules /,//忽略node_modules文件夹中的所有文件       使用:' jshint-loader”    }]  }};
复制代码

现在,当webpack启动时,它将向我们显示终端中的警告列表(我们将忽略):



由于moment.js位于node_modules文件夹中,因此JSHint加载程序不会将其删除:




进一步阅读
到此结束我们对webpack的介绍!由于这是初学者的课程,因此我们尝试仅涵盖最有用且必须了解的webpack概念。我们本教程对标题有15分钟的限制,对您有所帮助,不要太混乱。

总结
好了,今天的分享就到这里,如果你是一个正准备学习前端或者正在学习前端的小伙伴,有什么问题可以免费私信我,我这里也还有一些学习资料也可以免费分享给大家,点赞关注私信我即可,也可以加入我的前端学习交流群(109029339),希望分享的所有内容能让你们喜欢。码字不易,方便的话请点赞转发,你的转发和点赞将是我继续分享的动力......

转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部