Vue.js 学习笔记十一：Webpack之webpack 介绍和安装

目录

webpack 介绍和安装

webpack 介绍

webpack 安装

---

webpack 介绍和安装

webpack 介绍

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而 webpack 其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。 而且不仅仅是JavaScript 文件，我们的 CSS、图片、json文件等等在 webpack 中都可以被当做模块来使用。 这就是 webpack 中模块化的概念。

 

webpack 安装

在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。 使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能， 或者缺少相关 package。

查看自己的 node 版本：

node -v
v14.16.1

最新的 webpack 正式版本是： Releases · webpack/webpack (github.com)

 

 

本地安装

要安装最新版本或特定版本，运行以下命令之一：

npm install --save-dev webpack
# 或指定版本
npm install --save-dev webpack@

是否使用 --save-dev 取决于你的应用场景。假设你仅使用 webpack 进行构建操作，那么建议你在安装时使用 --save-dev 选项，因为可能你不需要在生产环境上使用 webpack。如果需要应用于生产环境，请忽略 --save-dev 选项。

如果你使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI。

npm install --save-dev webpack-cli

全局安装

通过以下 NPM 安装方式，可以使 webpack 在全局环境下可用：

npm install --global webpack

不推荐 全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中， 可能会导致构建失败。