写在开头
说说我对webpack的看法，如有大佬，请多指正
众所周知，在HTML文件中使用JavaScript只能通过script标签来引入
如果你用这种方法，有什么问题吗？如果以这种方式引入JavaScript，就不能大量引入JavaScript。有多少人？不多。加入一个页面需要20个JavaScript文件。该怎么办？必须添加20个脚本标签，并逐一询问。然而，第一页会减慢速度。加载页面后需要请求大量脚本。更重要的是，浏览器有一个请求限制。
由于浏览器只允许有一定数量的请求，大量的请求同时对浏览器造成了严重的性能问题。我在9102年使用了http/2。是的，大多数情况下都可以。name是一种特殊情况吗？例如，airbnb和MS的outlook由3000多个模块组成。
该怎么办？我可以在同一个文件中编写所有需要的JavaScript代码吗？是的，历史的发展使得老程序员看到了一个包含10000行的巨大JavaScript文件。这种方法无疑解决了上述问题。但是这份文件是否解释了这些缺点？我不与其他东西交谈，但是如果你对我的特性有任何问题，我想调试它该怎么办？我已经在第一行定义了一个变量，但是到10000行去寻找它。那么他就是一个全局变量。你怎么玩？
然后理所当然的，前端朋友们就想出了一个办法。是什么？Expresatery调用了函数表达式。中文立即执行一个函数。
var outerScope = 1;const whatever = (function(dataWillUsedInside){ var outerScope = 0; return { someAttribute: 'youWantThis' }})(0);// 1console.log(outerScope);
通过复制代码，游戏规则变得简单了。编写大量的JS文件并将其封装到IISI中并放入一个单独的文件中。很好。一个问题已经解决了。至少我们已经解决了可变污染的问题。进入了工具时代。这时，每个人都开始寻工具 — make, grunt, gulp, broccoli...
一个新问题走，代表一个新的问题又来了。如果你想修改一个文件，那么你需要编译所有的文件。包括他们我从未搬家。第二个问题，例如，想引用一个仓库，但如果需要，你会引用它吗？我不仅可以介绍一个肿块。这有点吓人。尤其是从当时的网络状况来看。它可能还需要提取一些仓库。你要做的就是投入。此外，由于各种原因，在IIF中创建的文件会减慢页面的加载速度。
JS的模块化
然后，前端的学生又成功了。需要模块化。Node实际上把V8带到了服务器边缘。问题来了。浏览器消失了。多姆走了。如何使用js？所以JS模块的出现带来了模块化，带来了commonjs。
// index.jsconst path = require('path');const [add, subtract] = require(''./math');/* * math.js (has two named exports [add, subtract]) */const divideFn = require('./division');exports.add = (first, second) => first + second;exports.subtract = (first, second) => first - second;exports.divide = divideFn;/* * dibision.js (has a exports 'divide') */module.exports = (first, second) => first / second;
一个简单的synjjs代码复制示例。有三个文件。它们可以一起引用。可以使用匿名默认导出。您可以按名称导出它。然后它将以特定语法引入其他文件。所以到目前为止，我们已经解决了问题领域。Ife不再是必要的。你现在不必担心各种各样的污染。我也解决了ife的缺陷。同时发布的NPM可以使用每个开发人员为每个人编写的各种包。
然而，有一个问题。这在节点中，不支持浏览器。另外，如果您是编写其他语言的程序员，您应该知道动态绑定，但是commjs不支持动态绑定。自述和流通引文层出不穷。而且，他的同步算法速度慢。还有一些有趣的事情可以解决这些问题。Browserify，需要JS，systeemjs。。。这些工具的用途很简单。您可以在浏览器中使用CommonJS。但它们不支持静态引入。换言之，只需要介绍使用哪个仓库。此外，这并不意味着当所有人都在档案中时使用commonjs，但AMD仍然存在。所以这个不能称为“模块系统”。
然后ES模块出现了。据说1998年就可以看到相关文件。所以，这是间歇式设计20周年纪念日。但是他的语法变得更友好了。至少它不像云里雾里一样的词。
import {uniq, forOf, bar} from 'lodash-es';import * as utils from 'utils';export const uniqConst = uniq([1, 2, 3, 4]);
代码副本现在似乎有了完美的模块系统。重用和包的基本特性似乎很好。但是出现了一些问题。在节点中使用似乎很困难。这是许多团队现在的工作方向。当它直接在浏览器中使用时，它会变得非常慢。认为它被放在网站上是可以的。10个模块可以达到这个效果。当你从浏览器的顶部到底部读取这个JS文件时，首先会遇到导入，然后查找这个包，找到相关的路径，验证它还不可用，然后读取这个文件并重复这个步骤。请注意，这是在运行时完成的，即加载主页时完成的。
webpack横空出世
前面说过，但是NPM可以使用不同的模块格式。不能说哪个错了，不能用。所以你需要用不同的方式面对不同的方式。你只需要在JS上下功夫。请记住，web应用程序和CSS中仍然存在一些静态资源。我们所需要的是一个“系统”或工具，它支持所有模块格式并支持非JS文件。
webpack是什么？
webpack is a module bundler lets you write any module format(mixed also), compiles then for the browser. And it supports static async bundling.
有一个简单而有力的定义。我已经解决了上面的问题。你是怎么创造出来的？这是一个有趣的插曲。
2012年，德国人托拜厄斯读到纽伯格的一位硕士写了一篇论文。他以前写过CXI，但从未编写过web界面。他需要在某些特定场景中使用googlewebtoolkit中的代码拆分功能。他的论文需要编写一个网络应用程序。他想找一个包含此功能的库。他发现的这个仓库叫做webmake。这也是bundler。但是，他提交的问题是因为没有代码分割功能。我写代码来实现这个功能。经过短暂的争论，维护者拒绝了他，在同意之后，他过去来到这个仓库叉，并将这个特性添加到自己身上，并将新包命名为webpack。
2014年，丹·阿布拉莫夫（Dan Abramov）在库存过剩时询问了热模块更换单元的情况。托拜厄斯向他介绍了一种仍在开发的大幅面纸张。我已经解释了这个功能在webpack中的工作原理。这个功能有多棒，你可以不用刷新浏览器了！
2015年，在instagram工作的皮特·亨特（Pete hunt）向全世界讲述了他们是如何利用网页包来发布其innovapps的。然后我知道了。甚至像Facebook这样的公司也开始使用webpack。但事实上，托比亚斯一周要在网页包里呆5个小时。
要想在现在的浪尖下安然存活，熟悉自己的项目是必要的，学习接纳新东西也是不可或缺的，不然就只能被时代前进的车轮滚滚压在脚下，毕竟和之前不一样，高铁都提速了，何况互联网乎？
写在最后
在真正的认识了几个大企业的大佬后，认真地和他们学习了很多经验以及获取了很多直观的资料，现在全部拿出来奉献给大家！
重点
在真正的认识了几个大企业的大佬后，认真地和他们学习了很多经验以及获取了很多直观的资料，现在全部拿出来奉献给大家！
获取方式
添加刘三岁Q群：【1038130565】（扫码，群文件获取）
添加本人Q：【2477767446】
祝大家学有所成，成就更好的自己
