webpack介绍(工具)

    webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle

webpack拥有很高的可配置性,可以很好的满足你的不同打包环境的配置需求。

接下来介绍下webpack的几个关键概念:



入口(entry)

输出(output)

loader

插件(plugin)

模式(mode)

浏览器兼容性(browser compatibility)


入口[Entry]:

    入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph)的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

输出[output]:

output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。

模式[mode]:

提供 mode 配置选项,告知 webpack 使用相应环境的内置优化,可以根据不同的需要配置不同的环境下的打包行为。

[加载]loader:

loader用于对模块的源代码进行转换。loader可以使你在 import 或加载模块时预处理文件。因此,loader类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript或将内联图像转换为data RURL。几乎可以在java模块中导入大多数文件。

插件[plugin]:

插件是webpac的支柱功能。webpack本身也可以看作是一个插件,添加其他插件目的是为了解决loader无法实现的其他事情。

以上内容整体会在一个webpack.config.js的文件中,举个例子:


如果想要看更详尽的webpack打包相关的知识,可以去webpack中文网:

https://webpack.docschina.org/concepts/plugins/

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 10,197评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,351评论 7 110
  • 一、概念 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bun...
    Timmy小石匠阅读 1,399评论 0 29
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,059评论 2 72
  • 每次回老家,亲戚们都问我同一个问题,我的回答从来都是没有,一年又一年。随后我分析了为什么自己一直单身的原因:1.做...
    刻骨的温柔阅读 254评论 1 0
  • 我不知道我该做什么样的人,也自知没有天赋做轻易与往日和解的人,但我至少可以学着不要再成为另一个你这样的人,不要再以...
    九九妹2阅读 106评论 0 0
  • 师者(其二) 恩师 初中,遇到了第一位恩师,也是唯一一位我学生生涯中遇到的恩师他让我第一次对正直这个品...
    ian老湿阅读 94评论 0 0
  • 就是希望, 往后的日子里。 自己能勇敢冲闯, 心里有什么都能说出来。 一定去爱的清楚, 千万把真心托付给愿意接受的...
    一位世人阅读 129评论 0 0