漫漫学vue路（4）-- webpack【未完成】

最新推荐文章于 2021-08-02 21:35:33 发布

前端炮灰预备员

最新推荐文章于 2021-08-02 21:35:33 发布

阅读量349

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41706280/article/details/103964115

版权

Vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.什么是webpack?

官方解释
在这里插入图片描述
webpack是一款强大的前端 模块化 打包工具

2.为什么要使用webpack?

模块化开发 我们知道是为了多人高效开发产生的，它解决了变量污染等问题同时也保证了代码的复用性。但是大量模块的出现，模块之间的相互引用会使得整个项目显得越来越复杂化。

这时，我们就需要一个工具用来将各个模块统一打包成一个文件，到时我们只需要将这一个文件传给服务器端即可。
（这是webpack的主要功能，是与其他打包工具的不同点，也是其在前端打包领域占有主导地位的原因。它的次要功能还有将sass，less等文件打包成浏览器可识别的css，html，js文件，保证了浏览器的正常编译）

3.webpack的安装

（ps：我在之前安装的是vue-cli4.0,因为想认真学习一下webpack，所以将vue-cli4.0卸载了，下了3.6.0版本的webpack）
在这里插入图片描述

4.webpack的基本使用过程

4.1 首先我模拟了一个小型的开发现场

在这里插入图片描述
index.html 入口页面
src 源码文件夹
dist 打包后的文件夹

4.2 编写源码文件

都放在src里
在这里插入图片描述

可看出就是简单的bbb.js引用aaa.js里的变量的例子

4.3 webpack打包

在这里插入图片描述
将bbb.js打包成module.js（为什么不打包aaa.js？因为webpack打包一个文件时会找与其关联的文件，并将其一起打包进去，所以这里的aaa.js也被打包了）

4.4 打包后

在这里插入图片描述
再在html引用module.js，就相当于真实开发的服务器接受打包后的文件，就可得到结果啦

<script src="./dist/module.js"></script>

在这里插入图片描述

5.webpack简单配置

（牵涉到了部分node命令，因为没有学过node，所以暂不深究）
在这里插入图片描述

前面用webpack打包时，是webpack后面跟上需要打包的文件路径和打包后的文件路径。为了方便我们可自定义命令，比如输入一个webpack即可自动打包

创建webpack.config.js文件，这个文件可对webpack进行一些配置
在这里插入图片描述
这里的出口路径在实际开发时是需要动态更改的，假如你在开发项目因为复制文件移动文件等问题更改了出口文件的绝对路径那就需要再找到这个文件进行更改，那就很麻烦了，所以就需要动态获取绝对路径。

动态获取绝对路径是需要node环境下的一些东西（包，模块，函数等等）的，所以为了使用这些东西，我们需要下载一个包
（具体操作会叫你写什么包名，版本，作者，描述什么什么的，这些暂时都用不到，回车撸到底就行了）
在这里插入图片描述
就会生成这样的一个package.json文件

现在我们就可以使用node的相关语法啦

node的语法不用管，反正就是成功动态获得了出口文件的绝对路径

打包成功
在这里插入图片描述

但在真实开发中，常用的打包命令还是npm run build,这个命令作用就是为了构建项目和打包文件。它相对于webpack命令有两个优点，第一是命令字符少，第二是优先使用局部webpack。这里我们讨论一下第二个优点。

真实开发中，公司整体会有一个全局webpack，例如4.1.11版本，而单独的项目会有局部webpack，例如3.6.0版本。当你使用cmd终端或者vscode终端，敲webpack命令时，使用的就是全局webpack，和你项目的webpack版本不符，就可能会有未知错误产生。而使用npm run bulid，它会在package.json文件里的“script”找build这个命令，会运行这个命令，这样运行的就是局部webpack。
在这里插入图片描述
为了运行局部webpack，当然我们就需要下局部webpack（我还是下的3.6.0版本）

下好之后我们会发现多了个文件夹
这个就是我们本地下的包，里面有很多默认下载的包，当然局部webpack也在里面

并且打开package.json文件，我们会发现多了
在这里插入图片描述
它的意思是开发时依赖：{webpack：3.6.0}，就是npm run build时使用的webpack版本
运行项目时（npm run serve），还会出现下面的东西，就是运行时依赖

“dependencise": {
}

最后npm run build打包成功
在这里插入图片描述

6.webpack的扩展配置

我目前下的webpack3.6.0版本是只支持js文件打包的，但是还有其他文件啊，比如scss，less，css，vue，jpg等文件都需要打包啊，webpack（3.6.0）是没有这些文件的打包功能的，，所以就需要自己配置

需要用到webpack的一个叫loader的东西
在这里插入图片描述

不过好像vue cli3开始提倡无配置编程了，所以我不打算再深入理解这些东西了，需要的时候再回来看吧

css,sass,图片,ES6转ES5啊都在这里面了

https://www.bilibili.com/video/av59594689?p=78

7.webpack使用vue的配置过程

首先肯定要下和vue有关的包
在这里插入图片描述
再我们试着试用一下vue语法
在bbb.js中加入

那么相应的index.html中也要加入

npm run build打包，刷新浏览器，会发现报错了

这个是因为vue的发布版本一般有多个个版本，默认选中的是runtime-only，这个版本不能编译vue中的template，所以会报错。
在这里插入图片描述
此时我们就需要将版本调到runtime-compiler