使用Webpack+Vue从无到有构建前端项目-纯基础入门篇(上)

1. 写在前面

Vue有提供官方脚手架Vue-cli，但很多人儿在在刚入门的时候不明白它的工作原理，Vue-cli到底默默地完成了哪些事情呢？所以这篇青涩的文章想要梳理一下，在舍弃Vue-cli提供的便利的情况下，如何使用Webpack搭建一个Vue前端项目的脚手架，为构建前端项目打好基础。

本文分为上下篇，本篇涉及范围是Webpack配置完成后的Vue文件打包，其他文件打包及插件使用等内容，请移步至下篇。

开始之前，首先保证电脑上已经安装了node。

2. 初始化

1). 项目初始化

项目命名的字母只支持小写。

终端执行：

npm init -y

-y表示直接使用项目初始化的默认选项。

安装完成后项目根目录中会多一个package.json文件。

2). 安装Webpack

Webpack4.0起已经将webpack与webpack-cli分开来以更好地管理它们，所以webpack-cli是单独的包，需要另外安装。

终端执行：

npm i webpack webpack-cli -D

-D表示安装的是开发环境的依赖。

安装完成后项目根目录或多一个node_modules文件夹存放安装的所有依赖包，以及自动生成package-lock.json用来锁定安装的依赖包的版本。package.json文件中出现了"devDependencies"字段，用来呈现当前项目开发环境所需要的的所有依赖包及版本。

到此为止，项目的基本信息有了，Webpack也安装了，既然是一个前端项目，那么必然需要一个主页面，以及完善页面组成的各种文件。下面就需要设置项目的各种入口了。

3. 设置项目入口

1). 主页index.html

在项目根目录新建项目的主页文件index.html，编写内容如图：

其中<div>用于后面创建Vue根实例。

2). 总入口main.js与Vue根实例

i. main.js

在项目根目录下新建src目录，在src目录下新建一个main.js文件作为项目的总入口文件。

在main.js中首先需要完成两件事：

1. 创建Vue根实例
2. 挂载App组件

后续所有需要到的配置均需要在此进行引入才能使用。

ii. Vue根实例

(1). 安装Vue

终端执行：

npm i vue

安装完成后package.json文件中出现了"dependencies"字段，及安装的Vue的版本信息。

(2). 创建Vue根实例

编写main.js内容如图：

(3). 挂载App组件

首先在src目录下新建App.vue，编写内容如图：

然后将App组件挂载到根实例并使用App标签渲染：

<App/>里的App与components里的App保持一致。

3). 测试

按照正常在html文件引入外部js文件的思路，在index.html中引入main.js进行测试，打开index.html查看效果，发现报错了：

Uncaught SyntaxError: Cannot use import statement outside a module. -> 模块外不能使用import语句。

显然浏览器是没有办法直接解析import语句的，所以需要Webpack先进行打包。

所以接下来需要先配置Webpack。

4. Webpack配置

1). Webpack配置文件

在项目根目录新建webpack.config.js作为Webpack的配置文件，并编写Webpack的基础配置：

2). Webpack打包脚本

在package.json文件的"scripts"字段中新建一个执行脚本，这样就可以在终端使用npm run build进行打包了（或者直接使用webpack是同样的结果）。

3). 测试打包

终端执行:

npm run build

发现又报错了，并且有一个警告。

首先解决这个警告：

The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment. -> 没有指明当前值是用于哪个模式，应设置’develpoment’开发模式or’production’生产模式。

所以在webpack.config.js中设置环境为mode:'development'即可：

然后解决那个错误：

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. -> 需要适当的loader来处理此文件类型(.vue文件)，当前没有配置任何加载程序来处理此文件。

意思就是说Webpack只能进行js文件的打包，而在我们已经创建的文件中，App.vue文件为vue文件，Webpack打包不了。

这时候就需要通过Vue提供的vue-loader专门来打包vue文件了，所以接下来就需要我们安装以及配置vue-loader。

5. Vue文件打包

按照Vue官方文档的说明进行vue-loader的安装与配置，指路官方文档。

1). 安装vue-loader

终端执行：

npm i vue-loader vue-template-compiler -D

安装完成后package.json文件中的"devDependencies"字段出现了vue-loader与vue-template-compiler的版本信息。

还应该注意的是，第一个警告的意思是

vue-loader@15.9.3 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself. -> vue-loader需要依赖css-loader，需要自行安装。

那么就安装一下css-loader，后面会用得到。

终端执行:

npm i css-loader -D

2). 配置vue-loader

按照Vue的官方文档对webpack.config.js进行vue-loader的配置：

3). 打包测试

终端执行打包命令，打包成功。

根目录里多了dist文件夹，里面有bundle.js文件，与在webpack.config.js的配置相符合。

4). 在index.html中引入bundle.js

在主页文件index.html中引入bundle.js文件后，打开index.html发现报错：

原因是Vue打包后会生成三种文件:

• runtime + compiler 的文件 vue.js
• runtime only 的文件 vue.common.js
• compiler only 的文件 compiler.js

从报错中可以看出默认使用的是第2种vue.common.js文件，但实际应该用的是vue.js文件。所以解决办法是在webpack.config.js中, 通过alias添加对别名的配置，这样当遇到vue文件时，则导入的是vue.js文件。

再次打包查看效果，页面正常显示没有报错~

到此为止，我们已经可以在页面中显示一些简单的文字了。但是一个页面不可能只显示普通的文本呀，一个好看的页面样式和配图都缺不了。那么对于图片和CSS样式，Webpack是怎么处理打包的呢？

本篇文章篇幅有限，其他相关具体内容欢迎查看本文相关内容的下篇。