使用 Vue 脚手架，为什么要学 webpack？

2021 年 9 月 29 日
筆記
VUE, 前端知识分享

先问大家一个很简单的问题：

vue init webpack prjectName 与 vue create projectName 有什么区别呢？

它们是 Vue-cli 2 和 Vue-cli3 创建项目的两个命令，之所以两个命令不同，根本原因是 Vue-cli2 是基于webpack 3，而 vue-cli3 是基于 webpack 4 的。

所以我们先介绍 webpack 是如何管理项目的，如何把项目中 js、css、html等是如何压缩转换文件？然后学习 vue-cli 2、vue-cli 3 分别如何创建项目，以及项目结构介绍。

一、全面了解 webpack

1.1、什么是Webpack？

webpack 就是前端模块化打包工具。讲人话就是，webpack 的理念就是一切皆模块化，把一堆堆的 js、css等文件放在一个总的入口文件引入，剩下 webpack 会把引入的文件根据对应的关系合并成一个 bundle.js 。打包后的 index.html 引入 bundle就可以了。除了 css、js还有图片、字体、html模板都可以模块化打包。

如下图：

1.2、为什么要将所有资源放在一个文件内？

我们都知道，网页渲染的时候，加载的东西越少，响应的也就更快，网页的加载速度就能快好多，有时为了优化性能，我们会把资源都合并到一个文件内，导致这个文件会很大，往往会出现两个问题：

当项目庞大的时候，不同页面不能做到按需加载，而且将所有的资源一并加载，耗费时间过长，性能反而降低
导致依赖库之间关系混乱，当项目越来越大时，会变得难以维护。

但是对于 webpack，可以很好地解决上述两个问题，webpack 有同步和异步两种加载方式，正确配置后，可以进行按需加载。所以 webpack 是一个十分聪明很有优秀的打包工具。

1.3、为什么使用webpack ?

对模块化规范 CommonJS 、AMD、CMD支持性友好。
形成项目依赖树，每个依赖都可拆分成一个模块，进行按需加载。
有强大的插件系统，可以实现代码压缩、分包、模块热替换等，自定义模块等自动化工作。
开发配置快速高效。是前端目前最主流的模块化打包工具。

二、开始你的第一个 webpack 项目

webpack 是一个基于 node 的项目，所以使用之前我们需要安装 node.js。

node.js 官网：//nodejs.org/zh-cn/

下载之后进行安装，安装完成之后：

使用 node -v检查 node 的版本：如：v12.18.2

使用 npm -v 检查 npm的版本

2.1、安装webpack

安装可分：为全局安装和当前项目安装。

全局安装：npm install webpack -g

在c盘下会生成 node_modules 文件夹中会包含 webpack，此时此刻我们可以使用 webpack命令了；

项目内安装：npm install webpack –save 或者npm install webpack –save-dev

npm install webpack –save 与 npm install webpack –save-dev 区别在于是否将依赖存入 dependencies 以及 devdependencies。

2.2、生成 package.json

创建一个webpack项目文件夹，进入项目文件内根目录下，执行命令：npm init

如图：根据问题提示，输入对应信息后，会在根目录下生成 package.json 文件。

2.3、新建项目内容

dist — distribution（发布）

创建 dist 文件夹，用于存储打包之后的文件。

创建 src 文件夹，文件夹内新建 index.js 作为入口；创建index.html文件，并创建main.js文件并引入html。

2.4、配置 webpack

webpack.config.js 代码如下：

module.exports={
 entry:'./src/main.js',
 output:{
  path:'./dist',
  filename:'bundle.js'
 }
}

entry(入口)：配置入口文件

output(输出)：设置打包后文件存放路径(path) 和文件名(filename)。

运行命令：webpack –config webpack.config.js，进行打包。

命令报错：

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
– configuration.output.path: The provided value “./dist” is not an absolute path!
-> The output directory as **absolute path** (required).

提示路径需要设置绝对路径。

2.5、打包文件

此时需要引入 node 的 path 模块。并修改 path 配置，把路径设置为当前项目根目录下。

修改 package.config.js 文件代码如下：

const path = require('path')
module.exports={
 entry:'./src/main.js',
 output:{
  path:path.resolve(__dirname,'dist'),
 filename:'bundle.js'
 }
}

重新运行命令：webpack –config webpack.config.js，进行打包。此时就会在dist文件夹内出现了一个被打包后的 bundle.js。

三、webpack 用来做什么？

以上内容讲述的打包，只是打包了js内容，具体的index.html并没有被打包到dist文件内。那是什么原因呢？

webpack 用来处理我们写的 js 代码，webpack会自动处理 js 之间相关依赖。但是开发中不仅仅只有基本的 js 代码处理，也需要加载 css、图片、也包括一些高级的ES6转ES5、TypeScript 转 ES5、将 scss、less 转 css、将 jsx.vue 文件转js文件等。

webpack 本不支持上述这些转化，此时需要对 webpack 进行扩充。下篇文章介绍webpack的 loaders 和 plugin。

点赞关注不迷路，感谢支持！

Tags: VUE 前端知识分享