学习使用webpack+vue搭建项目-优快云博客

本文链接：https://blog.youkuaiyun.com/Bonjourjw/article/details/78815686

本文记录了使用webpack+vue搭建项目环境的过程，包括基本环境安装配置、webpack的理解和使用。在实践中遇到的版本不匹配、路由路径问题、事件冒泡处理等难点，以及解决方案。同时，介绍了动态路由匹配、懒加载和购物车总价计算等功能的实现，通过实际操作加深对Vue和webpack的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，一直把JS基本语法知识重新巩固学习的同时，也一直在跟着上篇文章中提到的名为“守候”的博主发表的文章进行学习，今天也将自己在通过他的文章使用webpack+vue搭建项目环境的过程中遇到的值得记录的点，都一并写在这里。
仅仅自己目前对webpack的理解，就是一个打包工具。可以将项目中不同的语言识别转换成js，从设定的入口文件找到项目的所有依赖文件，将项目模块化开发，最终打包为一个或者多个浏览器可以识别的JavaScript文件。更深层次的还没有进一步理解，不过在操作过程中对其使用有更进一步的理解。
一、基本环境的安装配置及使用如下：
1. 首先，安装webpack，建议先全局安装后再安装到本地目录，具体的原因目前自己没有深入理解。

npm install -g webpack  //全局安装 
npm install --save-dev webpack

2 . 在package.json中，对项目描述信息及项目所需要使用到的相关依赖进行添加。可以手动创建或通过命令行：npm init。
3.webpack配置文件的完成：指定入口文件、出口文件、加载器及插件等。
//基本上就差不多了，需要使用的Vue、element-ui等，按照官方文档说明安装即可。
4.router.js配置
5.入口文件和入口文件模板的配置。
具体的直接参照该博主的系列文章：webpack+vue项目实战（一,搭建运行环境和相关配置）。
6.！！需要注意的点：
（1）由于博主是之前记录的，webpack、element-ui的版本都和现在有所偏差。可能很多小伙伴都运行报错，我也是一样，将版本升级后，再修改对应的配置即可。没有截图记录我当时的报错原因，反正报错后，我将所有的东西都升到了最新版，另外在入口文件中引入element-ui的css样式时，其默认的文件名已经由theme-default——>改为了theme-chalk。修改完毕后，运行成功。
（2）如下图所示，突然发现，哎哟~为什么路由路径是在dist目录下呢？而且我们的文件中并没有这个路径。
这里写图片描述

这里写图片描述

这就让我有点疑惑了，为什么它的指定路径会在dist/html下呢？而之前我接触到的项目都是直接locahost：端口号就可直接运行了，这里这样运行却会报错。
原因就是我们用了webpack-dev-server构建生成的包，实际是放在内存中的，即这里前面的前缀是代表虚拟目录，因此我们看不到编译后的dist文件。查询webpack-dev-server的定义：

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。

我想大概比较明朗了，因为我们设置webpack的输出路径：

   output: {
      path: path.join(__dirname, 'dist'), /*输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它*/
      publicPath: '/dist/',               
      filename: 'js/[name].js',   
      chunkFilename: 'js/[name].asyncChunk.js?'+new Date().getTime() //chunk生成的配置
    },

而且对npm也进行了设置，可通过简单的命令运行webpack-dev-server，且设置为热加载，方便修改后自动重新加载更新效果。
这里写图片描述

上面代码中涉及到的：
   __dirname变量值代表程序运行的根目录；
   path.join：路径合并   // 特点： 将多个路径名称用path.seq串联起来，然后normalize格式化
   ./                  //当前目录下
   ../                 //父级目录
   /                   //根目录
例如：
   path.join('//foo','bar','//baz/dfj'); // --> '/foo/bar/baz/dfj'

关于node.js中path对象更多的用法，可参考xiaobing_hope博主的文章”Node.js的Path对象“，里面有比较详细的说明哟。

另外，之所以之前我的项目中直接输入localhost：端口号/#就可以的原因是，之前的项目重新书写了webpack-dev-server,并没有直接使用下载的。
这里写图片描述

然后也配置了npm命令的简单方式：
这里写图片描述

这里写图片描述
上图表示打包文件的输出位置为build文件夹下的根目录。
简而言之，如果直接下载安装，我们在线运行webpack-dev-server时打包的文件在内存中，但我们可以通过自己实现dev-server对其进行改写后，实现自己想要的效果，如打包文件放置位置及可编译及编译文件生成的位置……
（3）在浏览时，发现博主用click点击事件时，还用到了Vue.js的stop修饰符，这个是用来防止冒泡事件的发生的。冒泡事件简而言之就是当前事件的传播性，防止影响到其他事件。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 <