对于许多开发人员来说，Vue.js是他们学到的第一个前端JavaScript框架。如果这对您来说是正确的，那么您可能还没有理由学习Webpack。但是当您继续使用Vue时，您将看到Webpack在文档、示例项目以及与Vue CLI之类的工具相关的内容中不断出现。
Webpack为Vue用户带来了很多好处:
-
一种自动化的开发过程，使编码变得轻而易举
-
一个方便的开发特性的世界，比如Vue钟爱的单文件组件
-
优化您的代码，使其快速和精益
但Webpack的各种可能性也是它最初如此令人生畏的原因。它似乎做了很多事情，以至于很难理解它到底是什么。
Webpack指南在解释Webpack方面变得越来越好，但是仍然假定有一定的背景知识。在本文中，我将尝试在不使用术语的情况下介绍这些背景知识，否则您可能会感到困惑。
示例项目
Webpack帮助您开发JavaScript应用程序，因此为了讨论它，我们应该考虑一个简单的示例项目。以下是我将在本文中引用的内容:
app.js
const app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Project</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
依赖
Webpack的故事始于对HTML文档中如何管理JavaScript依赖项的一些观察。所谓“依赖”，我指的是第三方库，如Vue、jQuery或Lodash，甚至来自您自己代码库的其他脚本文件。
实际上，除了确保任何共享函数和变量都具有全局作用域，并且脚本以正确的顺序加载之外，没有什么真正的方法来管理HTML文档中的依赖关系。
例如，由于Vue .js定义了一个全局Vue对象，并且是首先加载的，所以我们能够在app.js脚本中使用Vue对象。如果这两个条件都不满足，脚本就会崩溃。考虑一下我们试图在Vue加载之前使用它的地方:
<script> console.log(Vue); // Uncaught ReferenceError: Vue is not defined </script> <script type="text/javascript" src="vue.js"></script>
在复杂的web应用程序中，这个系统是不够的，因为:
-
全局变量引入了命名冲突的可能性
-
脚本加载顺序是脆弱的，可以很容易打破应用程序的增长
-
不能使用性能优化，比如异步加载脚本
模块
解决依赖关系管理问题的一个方法是使用模块系统，其中代码被模块化并导入到其他脚本中。多年来，已经开发了几种不同的JavaScript模块系统，但是ES模块是现在被合并到JavaScript标准中的系统。
下面是一个简单的ES模块示例:
moduleA.js
export default function(value) {
return value * 2;
}
moduleB.js
import multiplyByTwo from './moduleA'; console.log(multiplyBy2(2)); // 4
我们是否可以把Vue.js做成一个模块来避免讨论的问题?是的!直接在浏览器中使用的Vue.js脚本文件只是Vue的可用构建之一。还有一个名为vue.esm.bro本文来源gao.dai.ma.com搞@代*码(网$wser.js的ES模块构建，可以在我们的示例项目中这样使用:
app.js
import Vue from './vue.esm.browser.js';
const app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
});
脚本顺序现在不是问题，因为编译器知道它必须等到vue. esb .browser.js可用时才能运行。也不需要全局变量，因为模块是由它们的文件名引用的。
问题是浏览器并不始终支持ES模块。事实上，直到几个月前，任何浏览器都不支持它。
如果我们想使用ES模块或任何其他JavaScript模块系统，我们需要将代码解析为能够在浏览器中可靠使用的代码。输入Webpack。
捆绑
Webpack是一个在开发环境中离线运行的Node.js工具。Webpack能够在一个称为“捆绑”的过程中将JavaScript模块解析为浏览器友好的代码。
捆绑以“入口文件”开始。Webpack分析输入文件以找到任何依赖项。在示例项目中，app.js是条目文件，只有一个依赖项Vue.js。在大多数项目中，会有更多前端的相关知识。
我希望您已经了解到，Webpack首先是一个模块捆绑器。Webpack的所有其他特性都来自这个基本模型。
对于下一步，我建议您浏览Webpack文档的概念部分:
https://webpack.js.org/concepts/
以上就是适用于VueJS用户的无网络Webpack简介的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：适用于VueJS用户的无网络Webpack简介
