Vue 教程(二十五)webpack 安装
Posted _否极泰来_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 教程(二十五)webpack 安装相关的知识，希望对你有一定的参考价值。
Vue 教程(二十五)webpack 安装
模块(modules)
在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。
每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。在 web 存在多种支持 javascript 模块化的工具，这些工具各有优势和限制。webpack 基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。
为什么需要 JavaScript 模块？
如果你熟悉其他开发平台，你可能有一些概念的封装和依赖的概念。不同的软件通常单独开发，直到某些要求需要由以前存在的软件满足。目前，将其他软件带入项目时，它与新代码之间产生了依赖性。由于这些软件需要协同工作，因此它们之间不会发生冲突，这一点非常重要。但是如果没有某种封装，两个模块相互冲突是一个时间问题。当涉及到依赖关系时，在传统的客户端 JavaScript 开发中，它们是隐含的。换句话说，开发人员的职责是确保在执行任何代码块时满足依赖关系。开发人员还需要确保以正确的顺序（某些库的要求）满足依赖关系。
-
示例：
随着 JavaScript 开发变得越来越复杂，依赖性管理可能会变得繁琐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Backbone.js Todos</title> <link rel="stylesheet" href="todos.css" /> </head> <body> <script src="../../test/vendor/json2.js"></script> <script src="../../test/vendor/jquery.js"></script> <script src="../../test/vendor/underscore.js"></script> <script src="../../backbone.js"></script> <script src="../backbone.localStorage.js"></script> <script src="todos.js"></script> </body> <!-- (...) --> </html> -
临时解决方案：模块模式
var myRevealingModule = (function () {
var privateVar = "Ben Cherry",
publicVar = "Hey there!";
function privateFunction() {
console.log("Name:" + privateVar);
}
function publicSetName(strName) {
privateVar = strName;
}
function publicGetName() {
privateFunction();
}
// Reveal public pointers to
// private functions and properties
return {
setName: publicSetName,
greeting: publicVar,
getName: publicGetName,
};
})();
myRevealingModule.setName("Paul Kinlan");
-
临时解决方案：优缺点
优点：
- 简单到可以在任何地方实施（无需库，无需语言支持）。
- 多个模块可以在单个文件中定义。
缺点：
- 无法编程导入模块（除非使用
eval）。 - 依赖关系需要手动处理。
- 模块的异步加载是不可能的。
- 循环依赖关系可能会很麻烦。
- 静态代码分析器难以分析。
ES2015 模块
JavaScript 标准化背后的 ECMA 团队决定解决模块问题。结果可在最新发布的 JavaScript 标准中看到：ECMAScript 2015（以前称为 ECMAScript 6）。
示例：
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from "lib";
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
-
示例：import require define export
-
Webpack 概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
事实上 webpack 在处理应用程序的时候，它会根据命令或者配置文件找到入门文件；
从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如 js 文件、css 文件、字体等）
然后遍历图结构，打包一个个模块（根据文件的不同使用不同的 loader 解析）
安装 Node.js 环境
webpack 依赖于 node 环境，所以安装 webpack 前请确保你已安装 node 环境，推荐安装 node 的最新版本，可以提升 webpack 的打包速度。
Node 长期支持版本：14.17.0，我们这边下载【node-v14.17.0-x64.msi】版本，下载地址：https://nodejs.org/en/
查看 node.js 的版本 node -v
安装 webpack
webpack 分全局安装和局部安装
要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack npm install --save-dev webpack@<version>
// 如果你使用 webpack 4+ 版本，你还需要安装 CLI。 npm install --save-dev
webpack-cli</version
>
全局安装 webpack（这里我先指定版本号 3.6.0，因为 vuec2 依赖该版本）
–save-dev 是开发时依赖，项目打包后不需要的继续使用的。
npm install webpack@3.6.0 -g
查看 webpack 版本：webpack --version
– 以上为《Vue 教程(二十五)webpack 安装》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。
——厚积薄发(yuanxw)
以上是关于Vue 教程(二十五)webpack 安装的主要内容，如果未能解决你的问题，请参考以下文章