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

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模板都可以模块化打包。

如下图:

webpack和vue的关系(使用Vue脚手架)(1)

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

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

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

1.3、为什么使用webpack ?

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

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

node.js 官网:https://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

webpack和vue的关系(使用Vue脚手架)(2)

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

2.3、新建项目内容

dist -- distribution(发布)

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

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

2.3、配置 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,进行打包。

命令报错:

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

2.4、打包文件

此时需要引入 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。


点赞关注不迷路,感谢支持!

,