1.webpack

1.1概念

官方文档解释:
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。

在这里插入图片描述

从模块和打包的概念上理解就是:

webpack中的模块化

webpack其中一个核心就是模块化开发,并且处理模块间的依赖关系。不仅仅是JavaScript文件,CSS、图片、json文件等等在webpack中都可以被当做模块来使用。

打包

将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。

1.2 webpack的安装

  1. 安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm
    node.js官网https://nodejs.org/zh-cn/

https://jingyan.baidu.com/article/375c8e19f2918b25f2a22982.html
安装完成后可以通过命令行工具:node -v查看是否安装成功。node.js自带npm,所以node.js安装完成后,不需要再安装npm;输入命令npm -v,可查看当前npm的版本
在这里插入图片描述
2. 创建配置文件【package.json】

https://jingyan.baidu.com/article/48a420571e8175a924250494.html
(1)、通过命令提示符,打开存放【package.json】的文件夹;

(2)、输入npm命令:npm init -y创建默认配置文件package.json;

  1. 安装webpack:npm install webpack --save-dev
    安装webpack完成后通过输入命令【webpack -v】,查看当前webpack的版本信息,得到提示:不是内部或外部命令……,因为webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,所以还需要安装webpack-cli;

4、安装webpack-cli:

(1).输入命令npm install --save-dev webpack-cli
(2).然后在输入命令webpack -v,按回车键,得到提示:不是内部或外部命令……,说明webpack还是没有安装成功

(3).输入命令npm install --global webpack,按回车键;然后在输入命令webpack -v,按回车键,依然没有出现webpack的版本信息,
(4).就继续输入命令npm install --global webpack-cli,按回车键;然后在输入命令webpack -v,按回车键,出现webpack的版本,就说明安装成功。

全局安装webpack
值得注意的是webpack安装使用npm install --save-dev webpack-cli安装的是最新版本的webpack,若需要指定版本则可使用npm install webpack@4.43.0 -g(这里指定版本为4.43.0)

局部安装webpack
npm install webpack@4.43.0 --save-dev
–save-dev`是开发时依赖,项目打包后不需要继续使用的。

  • 在终端直接执行webpack命令,使用的全局安装的webpack
  • 当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack

2.Vue CLI

2.1概念

使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情

  • CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
  • Vue CLI是一个官方发布 vue.js 项目脚手架
  • 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI使用前提 - Node,必须安装node.js(上面的教程已给出)

NPM

  • NPM的全称是Node Package Manager
  • 是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
  • 使用NPM来安装一些开发过程中依赖包.

Vue CLI和webpack的关系

Vue.js官方脚手架工具就使用了webpack模板

  • 对所有的资源会压缩等优化操作
  • 它在开发过程中提供了一套完整的功能,能够使得开发过程中变得高效

2.2Vue CLI的安装

  1. 使用命令行语句:npm install -g @vue/cli也可写成npm install @vue/cli -g(位置不影响),安装好了之后可使用vue --version确认查看安装的脚手架版本。
  2. cnpm安装
    由于国内直接使用 npm 的官方镜像是非常慢的,也可使用淘宝 NPM 镜像。 你可以使用淘宝定制的 cnpm
    (gzip 压缩支持) 命令行工具代替默认的 npm: npm install -g cnpm --registry=https://registry.npm.taobao.org
    这样就可以使用 cnpm 命令来安装模块了: cnpm install [name]

我安装时遇到问题

  • npm ERR! A complete log of this run can be found in: npm ERR!

在这里插入图片描述
按照这篇博文的内容成功解决
安装vue cli出现npm ERR! A complete log of this run can be found in: npm ERR!错误(Vue cli)

Logo

前往低代码交流专区

更多推荐