Webpack 解决:ReferenceError: dist is not defined 的问题

1、问题描述:

其一、报错为:

ReferenceError: dist is not defined

中文为:

ReferenceError:dist 未定义

其二、问题描述为:

想在 webpack 的配置中,创建一个 dist 文件夹来存放 npm run build 打包后的文件,但发现运行代码后报错;

其三、控制台报错的页面显示为:

2、问题分析:

根据报错的提示:dist 未定义可知,在 output 中定义 path 的过程中,有问题;

3、问题解决:

其一、 output 对象中的内容简介:

A、filename 是指:打包后输出文件的名字为 bundle.js;
B、path 是指:想将打包后的 bundle.js 存放的路径地址;

其二、解决过程:

path: path.resolve(__dirname, dist) 修改为 path: path.resolve(__dirname, 'dist') 即可(即:将 dist 换成 'dist' 就行了);

报错的问题就被解决了;

其三、修改代码的页面为:

// 报错时的代码:

// 修改后的代码为:

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

相关推荐
BYSJMG4 分钟前
计算机毕设选题推荐:基于Hadoop的交通事故数据可视化分析系统
大数据·vue.js·hadoop·分布式·后端·信息可视化·课程设计
CHU7290357 分钟前
一番赏盲盒小程序前端功能:层级乐趣与便捷服务的双向赋能
前端·小程序
共享家952735 分钟前
基于 Coze 工作流搭建历史主题图片生成器
前端·人工智能·js
zhaoyin199436 分钟前
fiddler抓包工具使用
前端·测试工具·fiddler
朝朝暮暮an1 小时前
Node.js-第一天学习内容
node.js
Doris8931 小时前
【 Vue】 Vue3全面讲解文档
前端·javascript·vue.js
换日线°1 小时前
vue 实现Element Plus的炫酷主题切换
javascript·vue.js
Hexene...1 小时前
【前端Vue】如何快速直观地查看引入的前端依赖?名称版本、仓库地址、开源协议、作者、依赖介绍、关系树...(Node Modules Inspector)
前端·javascript·vue.js
fanruitian1 小时前
div水平垂直居中
前端·javascript·html
探序基因1 小时前
R语言分析10x的Xenium空间转录组数据
经验分享·学习方法