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

相关推荐
翻斗花园岭第一爆破手2 分钟前
flutter3.Container中的decoration
开发语言·前端·javascript
IT_陈寒5 分钟前
Java 21虚拟线程实战:7个性能翻倍的异步重构案例与避坑指南
前端·人工智能·后端
锅挤6 分钟前
Vue2:小水一下(5)
前端·javascript·html
翻斗花园岭第一爆破手7 分钟前
flutter2:Container的简介与尺寸
java·服务器·前端
我爱学习好爱好爱13 分钟前
Springboot+OSHI+Vue+ECharts 全栈监控系统
vue.js·spring boot·echarts
倔强的小石头_15 分钟前
Python 从入门到实战(十四):Flask 用户认证(给 Web 应用加安全锁,区分管理员与普通用户)
前端·python·flask
be or not to be18 分钟前
前端基础实战笔记:文档流 + 盒子模型
前端·笔记
程序员码歌19 分钟前
短思考第264天,每天复盘5分钟,胜过你盲目努力1整年(2)
前端·后端·ai编程
nono牛20 分钟前
实战项目:设计一个智能温控服务
android·前端·网络·算法
历程里程碑2 小时前
LeetCode热题11:盛水容器双指针妙解
c语言·数据结构·c++·经验分享·算法·leetcode·职场和发展