Hello,又见面了,我是渔戈!

今天我们来讲讲 Vue 的开发模式与 webpack!

1.Vue 的开发模式

目前我们使用 vue 的过程都是在 html 文件中，通过 template 编写自己的模板、脚本逻辑、样式等

但是随着项目越来越复杂，我们会采用组件化的方式来进行开发：

• 这就意味着每个组件都会有自己的模板、脚本逻辑、样式等；

• 当然我们依然可以把它们抽离到单独的 js、css 文件中，但是它们还是会分离开来；

• 也包括我们的 script 是在一个全局的作用域下，很容易出现命名冲突的问题；

• 并且我们的代码为了适配一些浏览器，必须使用 ES5 的语法；

• 在我们编写代码完成之后，依然需要通过工具对代码进行构建、代码；

所以在真实开发中，我们可以通过一个后缀名为 .vue 的 single-file components (单文件组件) 来解决，并且可以使用 webpack 或者 vite 或者 rollup 等构建工具来对其进行处理。

1.1 单文件的特点

在这个组件中我们可以获得非常多的特性：

• 代码的高亮

• ES6、CommonJS 的模块化能力

• 组件作用域的 CSS

• 可以使用预处理器来构建更加丰富的组件，比如 TypeScript、Babel、Less、Sass 等

1.2 如何支持 SFC

如果我们想要使用这一的 SFC 的.vue 文件，比较常见的是两种方式

• 方式一：使用 Vue CLI 来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用.vue 文件；

• 方式二：自己使用 webpack 或 rollup 或 vite 这类打包工具，对其进行打包处理；

无论是我们做项目，还是在公司进行开发，通常都会采用 Vue CLI 的方式来完成

2.认识 webpack

事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：

• 比如开发过程中我们需要通过模块化的方式来开发

• 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过 ES6+、TypeScript 开发脚本逻辑，通过 sass、less 等方式来编写 css 样式代码

• 比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率

• 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化

但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：

• 这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；

• 但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；

• 事实上 Vue-CLI、create-react-app、Angular-CLI 都是基于 webpack 来帮助我们支持模块化、less、TypeScript、打包优化等的

2.1Webpack 到底是什么呢？

我们先来看一下官方的解释：

webpack 是一个静态的模块化打包工具，为现代的 JavaScript 应用程序；

我们来对上面的解释进行拆解

• 打包 bundler：webpack 可以将帮助我们进行打包，所以它是一个打包工具

• 静态的 static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）

• 模块化 module：webpack 默认支持各种模块化开发，ES Module、CommonJS、AMD 等

• 现代的 modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了 webpack 的出现和发展

2.2Webpack 官方的图片

2.3Webpack 的使用前提

• webpack 的官方文档是 https://webpack.js.org/

• webpack 的中文官方文档是 https://webpack.docschina.org/

• Webpack 的运行是依赖 Node 环境的，所以我们电脑上必须有 Node 环境

• 所以我们需要先安装 Node.js，并且同时会安装 npm；

• 我当前电脑上的 node 版本是 v14.15.5，npm 版本是 6.14.11（你也可以使用 nvm 或者 n 来管理 Node 版本）；

2.4Webpack 的安装

webpack 的安装目前分为两个：webpack、webpack-cli

那么它们是什么关系呢？

• 执行 webpack 命令，会执行 node_modules 下的.bin 目录下的 webpack；

• webpack 在执行时是依赖 webpack-cli 的，如果没有安装就会报错；

• 而 webpack-cli 中代码执行时，才是真正利用 webpack 进行编译和打包的过程；

• 所以在安装 webpack 时，我们需要同时安装 webpack-cli（第三方的脚手架事实上是没有使用 webpack-cli 的，而是类似于自己的 vue-service-cli 的东西）

2.5Webpack 的默认打包

我们可以通过 webpack 进行打包，之后运行打包之后的代码

• 在目录下直接执行 webpack 命令

生成一个 dist 文件夹，里面存放一个 main.js 的文件，就是我们打包之后的文件：

• 这个文件中的代码被压缩和丑化了；

• 我们暂时不关心他是如何做到的，后续我讲 webpack 实现模块化原理时会再次讲到

• 另外我们发现代码中依然存在 ES6 的语法，比如箭头函数、const 等，这是因为默认情况下 webpack 并不清楚我们打包后的文件是否需要转成 ES5 之前的语法，后续我们需要通过 babel 来进行转换和设置；

我们发现是可以正常进行打包的，但是有一个问题，webpack 是如何确定我们的入口的呢？

• 事实上，当我们运行 webpack 时，webpack 会查找当前目录下的 src/index.js 作为入口；

• 所以，如果当前项目中没有存在 src/index.js 文件，那么会报错；

相关文章:

你真的了解过Vue的组件化开发吗🔥

原来Vue3的computed属性还能这么用啊🔥

邂逅Vue3

Vue3的基本指令

Vue3:认识侦听器watch🔥

你真的了解v-model吗🔥