【前端系列剧】前端程序猿英雄救美（Webpack搭建Vue项目）-CSDN博客

本文链接：https://blog.csdn.net/p445098355/article/details/126352456

该故事纯属虚构，如有雷同，请不要对号入座！

老罗为难实习小美女

“小艺，你的那个项目还没有跑起来吗？！” 项目经理老罗瞪大了眼睛看着新来的前端小美女实习生问道。

“罗……罗经理，马……马上就好了……” 小艺怯懦的看着膀大腰圆的经理，颤颤巍巍的回答着。

“今天下班前，你的前端项目还跑不起来，就不用在这里实习了！” 说罢，老罗提了一下被大肚囊挤下去的皮带，扭动着不太灵活的屁股回到自己的办公室了。

”怎么办，怎么办……“ 小艺满脸的着急与委屈，清丽的脸庞上，挂着一双泪水盈眶的大眼睛。

这时，正好柯阿南从会议室走出来，看到正在哭泣的小艺，关心地问道：“小艺，你怎么了？”

小艺见是柯阿南过来了，委屈的说道：“阿南哥，罗经理让我用 Webpack 搭建一个 Vue 的前端项目，一直报错，怎么都启动不了……” 小艺抹了抹脸颊上的泪珠。

“使用 Webpack 搭建？之前我不是教给你用 Vue Cli 脚手架了吗，直接快速搭一个 Vue 项目就行了，为什么非要用 Webpack 搭建项目呢？” 柯阿南疑惑的问道。

“罗经理说了，使用 Vue Cli 脚手架工具搭建的项目虽然很方便，但是遇到一些特殊的需求时，不便于使用 Webpack 对项目进行特定的配置，所以非要让我用 Webpack 搭建项目，这也是我实习考核的一部分。我大学里也没有学过 Webpack ，所以就不知道该怎么办了。”

听小艺说完事情的经过，柯阿南就笑了：“哈哈，原来是这么回事，不用着急，反正你是我带的实习生，多教你点东西也没关系。”

小艺激动的说道：“真的吗？阿南哥，太谢谢你了，你要是真的帮我把项目搭起来，下班了我请你喝奶茶！”

“啪”，柯阿南打了个响指，“一言为定！”

前端程序猿英雄救美

柯阿南坐在小艺的椅子上，看着沾满了皮卡丘贴纸笔记本电脑，心里嘀咕道：“果然是个小女生，如果公司能多进几个这样的漂亮程序媛，我也不至于单身这么久……”。

“阿南哥，我们开始吧，我准备好做笔记了。” 小艺抿着粉红的小嘴，开心的说道。

“嗯！”，柯阿南给了一个坚定的眼神，公司兄弟们的幸福，就全靠我了！

只见柯阿南在电脑 E 盘中新建了一个名为 “workspace” 的文件夹，对小艺说道：“小艺，以后你的项目都要在这个 workspace 的文件夹中创建，知道吗？”

“好的，阿南哥。” 小艺答道。

创建好 workspace 文件夹后，柯阿南打开文件夹，然后又创建了一个名为 “project” 的文件夹，说道：“我先给你演示一下，这个project的文件夹就先作为你以后要创建的项目，所有的工作都要在这个project文件夹中去完成”。

紧接着，柯阿南启动了电脑的命令行工具，使用 cd 命令切换到了 E:\workspace\project 目录下。

在这里插入图片描述
在命令行窗口中输入了一个命令：

npm init -y

在这里插入图片描述
命令执行成功后，在 project 文件夹中就自动创建了一个 package.json 的文件。

小艺不解的问道：“阿南哥，你输入的这个命令后面的 -y 是什么意思啊？”

柯阿南回答道：“npm init 命令是用来初始化一个 package.json 的配置文件，但是会生成配置文件的过程中会不断的询问关于项目的名称、版本号、描述等信息，如果在命令的后面加上一个 -y 的话，代表一路 yes，全部按照默认的配置生成文件。”

小艺点点头，调皮的说道：“阿南哥，你真厉害！”

柯阿南腼腆地笑了一下，继续完成项目的搭建。

“小艺，你记好，既然我们要使用 Webpack 搭建项目，那肯定是要先安装 Webpack，目前最新的版本是 Webpack5，所以，后面安装的其他依赖包都要注意兼容 Webpack5，不然就会报各种编译的异常。” 柯阿南苦口婆心的说道。

柯阿南在之前的命令窗口中继续敲了一大串的命令，潇洒的按了一下回车键。

在这里插入图片描述
“这个命令其实就是安装了两个 Webpack 相关的工具，后面的 --save-dev 是指在开发环境下的安装。” 柯阿南解释道。

这个命令其实是在安装下面的两个依赖：

# 安装 webpack 核心依赖
npm install webpack --save-dev

# 安装 webpack-cli 工具
npm install webpack-cli --save-dev

“安装好 Webpack 工具之后，我们还需要再安装相关的 loader 和 plugins 。” 柯阿南继续说道，紧接着，又输入了一个安装命令。

在这里插入图片描述
当然了，这个命令和上边的安装命令是类似的，安装了五个依赖，分别是：

# 安装 babel 核心模块
npm install @babel/core --save-dev

# 安装 babel 的加载器
npm install babel-loader --save-dev

# 安装 vue 的加载器
npm install vue-loader --save-dev

# 安装编译Vue模板的依赖
npm install vue-template-compiler --save-dev

# 安装 HTML 的渲染插件
npm install html-webpack-plugin --save-dev

在这里插入图片描述
小艺看完，问道：“阿南哥，我知道你这条安装命令也是安装了依赖，但是为什么要加上版本号呢？而且后面也不再是 --save-dev 了，换成了 --save。”

“小艺，你看的很仔细啊！” 柯阿南夸奖道：“这条命令是安装了 Vue2 的相关依赖，Vue2 已经非常成熟了，如果不加版本号的话，默认安装的是最新版的 Vue3，在 Vue3 没有出稳定版本之前，我们还是先用 Vue2 做项目吧，生态比较完善。” 柯阿南停顿了一下继续说道：“后面的 --save 是指这几个依赖安装到生产环境下，可以简写成 -S ，之前的 --save-dev 是指把依赖安装到开发环境下面，也可以简写成 -D 。”

“它们有什么区别吗？”小艺不解的问。

“依赖被安装到开发环境下，只有在本地开发阶段才能使用这个依赖。被安装到生产环境下的依赖，在执行 build 打包命令后，这些依赖可以被编译到前端介质包中，随着前端项目一起发布到生产环境，等项目上线了依旧可以使用这个依赖。”柯阿南耐心的解释道。

“哦哦，原来如此。那 Webpack 的依赖没有安装到生产环境，意思是说一旦代码被打包后，这个依赖就不再使用了，为了节省生产环境的空间，所以就把 Webpack 相关的依赖都安装在开发环境下，对吗？”小艺若有所思的问道。

“对的，就是这样，小艺，你真聪明！” 柯阿南不禁地对眼前这个小美女多看了一眼，心里感叹道：“真是个好苗子！”

小艺从进公司做实习生半个月以来，第一次听到同事的夸奖，而且还是自己钦佩的人夸奖自己，不由得小脸红扑扑的，害羞了起来。

让这个项目跑起来

“小艺，现在安装的依赖已经差不多了，我教你怎么创建项目的基础文件，然后让这个项目跑起来。” 柯阿南自信的说道。

“嗯嗯，好的，阿南哥！” 小艺开心地像个小兔子一样。

“首先，你要先创建项目的入口文件和 webpack.config.js 配置文件。” 说罢，柯阿南又熟练的操作起来。

柯阿南用 VSCode 编辑器打开了 project 这个项目文件夹，然后在项目中创建了几个文件：

在这里插入图片描述
创建好这几个文件以后，柯阿南开始逐个打开每个文件，手指在键盘上飞舞着，编写代码。

public/index.html 模板文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

src/main.js 项目入口文件代码：

import Vue from 'vue'
import App from './app.vue'

new Vue({
    render: h => h(App)
}).$mount('#app')

src/App.vue 组件文件代码：

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello vue!'
    }
  }
}
</script>

webpack.config.js 配置文件代码：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html'
    })
  ]
}

柯阿南问：“小艺，你能看懂这些文件是干什么用的吗？”

小艺答道：”嗯，大概看明白了，除了 webpack.config.js 配置文件，其他的三个文件和 Vue Cli 脚手架创建的项目文件是一样的！“

柯阿南说：“说对了，其实，使用 Webpack 搭建 Vue 项目，只需要安装好 Vue 的依赖包，对 webpac.config.js 文件进行配置就可以了。”

“你先记住 Webpack 里面的几个核心概念，entry入口、output出口、loader加载器、plugins插件，只要完成了这四个配置，基本上就可以搭建起来一个项目的开发环境。” 柯阿南继续说道：“你看这个 webpack.config.js 配置文件，里面大部分配置都是通用的，只有两个地方是 Vue 开发环境最核心的的配置。” 说罢，便在电脑屏幕上给小艺指出了两处关键配置。

在这里插入图片描述
“第一处配置是使用 vue-loader 加载器来编译 .vue 文件，第二处配置是引入 VueLoaderPlugin 插件，只要有了这两个配置，就可以使用 vue-loader 来解析并编译 Vue 组件了。” 柯阿南解释道。

编写完代码后，柯阿南继续在命令行工具中执行了 npx webpack 的命令。

在这里插入图片描述
小艺看到命令执行完成后，在 VSCode 编辑器的资源管理器中多了一个 dist 文件夹，惊喜的喊道：“成功了！阿南哥！”。

在这里插入图片描述
“但是，你为什么使用 npx 这个命令打包呢？” 小艺歪着小脑袋，不解的问道。

“因为 webpack 和 webpack-cli 是在当前项目下安装的，如果直接使用 webpack 这个命令的话，系统会直接去 npm 的全局安装目录下寻找 webpack 可执行文件，但是我们全局并没有安装这个命令，使用 npx 的话，就先在当前项目的 node_modules/.bin 目录下寻找 webpack 可执行文件，然后去执行。” 柯阿南解释道。

在这里插入图片描述
小艺在当前项目的 node_modules/.bin 目录下果然找到了 webpack.cmd 可执行文件，又好奇的问：“那我们为什么不在全局安装 webpack 呢？”

柯阿南看了一眼满怀期待的小艺，解释道：“如果我们在自己电脑上全局安装了 webpack，那么项目中的 webpack 和电脑上全局安装的 webpack 版本就有可能不一致，执行的时候直接运行 webpack 命令的话，会造成一些问题，可能就不是使用项目下的 webpack 版本对项目进行打包。还有一点，如果创建项目时使用了 npm install webpack -g 这个命令全局安装的话，那当前项目中就不会有 webpack 的依赖文件了，等其他同事拿到项目的源码，执行 npm install 就不能把 webpack 给安装上，也会导致后期项目无法打包。”

“噢，原来是这样啊！” 小艺满意的点了点头，突然指着屏幕喊道：“阿南哥，这里有个警告！”

在这里插入图片描述
柯阿南看了一眼 webpack 打包时的警告，说道：“小问题，就是没有指定 mode 配置项而已。”

“mode 配置项？” 小艺疑惑道。

“mode 就是用来设置 webpack 打包的模式，一般有 development 和 production 两种配置，我们可以在执行打包命令时带上 mode 参数，当然也可以在 webpa.config.js 文件中配置 mode 字段。” 柯阿南边说边在命令行窗口中输入了一串命令：

# 添加 mode 参数的打包命令
npx webpack --mode development

在这里插入图片描述
“这次打包就不再出现那个警告了。”

柯阿南在浏览器中打开了 project/dist/index.html 文件，查看了一下打包后的效果：

在这里插入图片描述
看到打包的文件没有问题，轻拍了两下手，转身就要起来，并对小艺说道：“好了，现在 Vue 的开发环境已经搭起来了，你去交差吧。”

小艺见柯阿南要走，急忙拽住他的胳膊，说道：“阿南哥，你还没有弄完呢，为什么地址栏里显示的是 index.html 的绝对路径，而不是 IP 地址啊？”

柯阿南看了一眼拽着自己胳膊的芊芊细手，小艺也察觉到了哪里不对，急忙缩回小手，红着脸说道：“阿南哥，还……还没完呢……”

此时，柯阿南不知哪里来的满腔动力，猛的坐下，扶了一下笔记本电脑，继续一顿猛敲……

首先，在命令行窗口中又输入了一串命令，安装了一个新的工具：

# 安装 webpack-dev-server 本地服务器
npm install webpack-dev-server --save-dev

在这里插入图片描述
然后又在 webpack.config.js 配置文件中添加了一个 devServer 的配置项：

module.exports = {
    //...
    devServer: {
        hot: true,
        port: 8080,
        open: true
    }
}

搞完这些后，柯阿南解释道：“这个 webpack-dev-server 是本地服务器，以后在开发阶段启动项目，直接执行 npx webpack serve 这个命令就行了。” 说完，柯阿南看了一眼小艺红扑扑的小脸蛋，心里嘀咕了一下：真是造孽啊~~算了，送佛送到西，给她配置个 npm scripts 脚本吧！

只见柯阿南又打开了项目根目录下的 package.json 配置文件，添加了两个字段：

{
    "scripts": {
        "dev": "webpack serve --mode development",
    	"build": "webpack --mode production"
    }
}

“小艺，以后你在本地启动项目和执行项目打包，就可以使用这两个 npm scripts 脚本了。” 柯阿南边说边在命令行窗口中给小艺演示。

# 启动本地服务
npm run dev

在这里插入图片描述
打开浏览器后，果然看到的是以IP地址访问项目的：

# 执行项目打包
npm run build

在这里插入图片描述
小艺看完柯阿南的演示后，兴奋的鼓起了掌，喊道：“哇~~ 原来 npm 脚本还可以这么用啊！太神奇了！” 然后双手抱拳，抿着小嘴对柯阿南笑着说道：“多谢阿南哥相助！小女子无以……” 柯阿南此时心里像是有一万只小鹿在乱撞，慌忙的站起身，头也不回地径直向洗手间方向走去， “为报……” 小艺看柯阿南着急的走了，在嘴里小声的嘟囔着后面两个字，心想：都怪我，缠着阿南哥解决问题，占用他那么久的时间，应该早就憋坏了吧……

此时的小艺也没有多想，按照柯阿南教的方法，继续在电脑上完成老罗交给自己的任务。

“所有开发人员都去会议室开会！” 老罗急冲冲的从自己的办公室出来，对着工位上的程序员们喊道。

”开会？“ 小艺慢悠悠的站起来向会议室走去……

【故事未完待续……】

总结

使用 Webpack 搭建前端项目的开发环境，要注意以下几点：

安装 webpack、webpack-cli 依赖到开发环境中，尽量不要使用全局安装；
安装 babel 的加载器，包括：@babel/core、babel-loader，使用 babel 来编译 ES6 及以上版本的 JavaScript 代码；
安装 HTML 模板渲染的插件 html-webpack-plugin，在编译时渲染 HTML 代码；
安装本地服务器工具 webpack-dev-server
根据自己项目的需要安装框架相关的依赖，例如 vue-loader、vue-template-compiler 等。

安装完上述的依赖后，需要在 webpack.config.js 配置文件中做相关的配置，基本配置包括：

entry 入口配置
output 出口配置
module 加载器配置
plugins 插件配置
devServer 本地服务器配置

完成上述配置后，还可以根据当前项目所有执行的不同命令，配置 npm scripts 脚本。

在安装依赖时需要注意版本之间的兼容性问题，或者是保留一份 package.json 备份文件，将配置拷贝到项目中的 package.json 中，直接在项目根目录下执行 npm install 即可。

package.json 配置文件模板：

{
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^5.3.2",
    "vue-loader": "^15.9.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuex": "^3.4.0"
  }
}