执行npm run build的时候报错怎么办?_npm run build 报错-程序员宅基地

技术标签: webpack  npm  javascript  

执行npm run build的时候报错怎么办?

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.configuration.output has an unknown property ‘publiscPath’.

当我们执行npm run build的时候出现以下错误,说明打包不成功。
我们只需要看前面的这两行,意思大概是无法配置对象。Webpack的初始化使用了不匹配的配置对象API模式。配置有一个未知的属性“publiscPath”。
[webpack-cli] Invalid configuration object. Webpack has been initialized using  schema.
 - configuration.output has an unknown property 'publiscPath'. These properties
   object {
     assetModuleFilename?, asyncChunks?, auxiliaryComment?, charset?, chnkLoading?, chunkLoadingGlobal?, 
clean?, compareBeforeEmit?, crossOriginLoading?, cssChunkFilename?, cssFilenameModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLt?, filename?, globalObject?, hashDigest?, hashDigestLength?, hash
Function?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFme?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publifix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, 
trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFil                                    -> Options affecting the output of the compe the compiled files to disk.
1.先检查是否下载好webpack模块,没有下载好的先装好,是不是有漏装的
cnpm install webpack webpack-cli html-webpack-plugin webpack-dev-server -D
2.检查配置生产环境 webpack.prod.js
找到publiscPath,看看为什么没配置对
仔细一看!!!原来是单词没拼写对!
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    
    // 入口
    entry:path.resolve(__dirname,"../src/index.js"),
    // 出口
    output:{
    
        // 打包后的文件名
        filename:"js/app.bundle.js",
        // 打包的输出目录
        path:path.resolve(__dirname,"../build"),
        // 会将上次打包的内容进行清理
        clean:true,
        // 指定引入文件的地址前缀
        publiscPath:"/"
    },
    // 插件配置
    plugins:[
        new HtmlWebpackPlugin({
    
            // 指定模板文件
            template:path.resolve(__dirname,"../public/index.html"),
            // 为引入的JS增加版本HASH
            hash:true,
            // 将JS放置在body尾部
            inject:"body",
            // 压缩HTML
            minify:{
    
                // 去除注释
                removeComments:true,
                // 去除双引号
                removeAttributeQuotes:true,
                // 去除空格换行
                collapseWhitespace:true
            }
        })
    ],
    // 指定模式为生产模式
    mode:"production"
}

解决办法:改过来就好啦~

 // 指定引入文件的地址前缀
publicPath:"/"
还有很多小伙伴在打包的时候还会出现其他的问题,比如:

vscode会自动联想!!!将plugins误写成Plugin,就会报错。修改过来即可

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/WWEIZAI/article/details/124812124

智能推荐

linux里面ping www.baidu.com ping不通的问题_linux桥接ping不通baidu-程序员宅基地

文章浏览阅读3.2w次,点赞16次,收藏90次。对于这个问题我也是从网上找了很久,终于解决了这个问题。首先遇到这个问题,应该确认虚拟机能不能正常的上网,就需要ping 网关,如果能ping通说明能正常上网,不过首先要用命令route -n来查看自己的网关,如下图:第一行就是默认网关。现在用命令ping 192.168.1.1来看一下结果:然后可以看一下电脑上面百度的ip是多少可以在linux里面ping 这个IP,结果如下:..._linux桥接ping不通baidu

android 横幅弹出权限,有关 android studio notification 横幅弹出的功能没有反应-程序员宅基地

文章浏览阅读512次。小妹在这里已经卡了2-3天了,研究了很多人的文章,除了低版本api 17有成功外,其他的不是channel null 就是没反应 (channel null已解决)拜托各位大大,帮小妹一下,以下是我的程式跟 gradle, 我在这里卡好久又没有人可问(哭)![image](/img/bVcL0Qo)public class MainActivity extends AppCompatActivit..._android 权限申请弹窗 横屏

CNN中padding参数分类_cnn “相同填充”(same padding)-程序员宅基地

文章浏览阅读1.4k次,点赞4次,收藏6次。valid padding(有效填充):完全不使用填充。half/same padding(半填充/相同填充):保证输入和输出的feature map尺寸相同。full padding(全填充):在卷积操作过程中,每个像素在每个方向上被访问的次数相同。arbitrary padding(任意填充):人为设定填充。..._cnn “相同填充”(same padding)

Maven的基础知识,java技术栈-程序员宅基地

文章浏览阅读790次,点赞29次,收藏28次。手绘了下图所示的kafka知识大纲流程图(xmind文件不能上传,导出图片展现),但都可提供源文件给每位爱学习的朋友一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长![外链图片转存中…(img-Qpoc4gOu-1712656009273)][外链图片转存中…(img-bSWbNeGN-1712656009274)]

getFullYear()和getYear()有什么区别_getyear和getfullyear-程序员宅基地

文章浏览阅读469次。Date对象取得年份有getYear和getFullYear两种方法经 测试var d=new Date;alert(d.getYear())在IE中返回 2009,在Firefox中会返回109。经查询手册,getYear在Firefox下返回的是距1900年1月1日的年份,这是一个过时而不被推荐的方法。而alert(d.getFullYear())在IE和FF中都会返回2009。因此,无论何时都应使用getFullYear来替代getYear方法。例如:2016年用 getFullYea_getyear和getfullyear

Unix传奇 (上篇)_unix传奇pdf-程序员宅基地

文章浏览阅读182次。Unix传奇(上篇) 陈皓 了解过去,我们才能知其然,更知所以然。总结过去,我们才会知道我们明天该如何去规划,该如何去走。在时间的滚轮中,许许多的东西就像流星一样一闪而逝,而有些东西却能经受着时间的考验散发着经久的魅力,让人津津乐道,流传至今。要知道明天怎么去选择,怎么去做,不是盲目地跟从今天各种各样琳琅满目前沿技术,而应该是去 —— 认认真真地了解和回顾历史。 Unix是目前还在存活的操作系_unix传奇pdf

随便推点

在VSCode中运行Jupyter Notebook_vscode jupyter notebook-程序员宅基地

文章浏览阅读7.8k次。在VSCode中运行Jupyter Notebook_vscode jupyter notebook

老赵书托(2):计算机程序的构造与解释-程序员宅基地

文章浏览阅读122次。我要推荐的第一本书便是大名鼎鼎的《Structure and Interpretation of Computer Programs》,在国内可以买到中译版,即机械工业出版社的《计算机程序的构造与解释》。 抽象豪不夸张地说,这是一本影响了好几代程序员的书。自从上世纪80年代MIT开始使用这本书作为教材开始,它使用Lisp语言——直到前两年才被Python取代,但是使用哪本教材不得而知,由这..._老赵书拖

图像处理之常见二值化方法汇总-程序员宅基地

文章浏览阅读6.1k次,点赞5次,收藏53次。图像处理之常见二值化方法汇总图像二值化是图像分析与处理中最常见最重要的处理手段,二值处理方法也非常多。越精准的方法计算量也越大。本文主要介绍四种常见的二值处理方法,通常情况下可以满足大多数图像处理的需要。主要本文讨论的方法仅针对RGB色彩空间。方法一:该方法非常简单,对RGB彩色图像灰度化以后,扫描图像的每个像素值,值小于127的将像素值设为0(黑色),值大于等于127..._web 图像二值画

基于springboot实现社区团购系统项目【项目源码+论文说明】计算机毕业设计-程序员宅基地

文章浏览阅读502次,点赞23次,收藏16次。在网站的整个开发过程中,首先对系统进行了需求分析,设计出系统的主要功能模块,其次对网站进行总体规划和详细设计,最后对基于Spring Boot的社区团购系统进行了系统测试,包括测试概述,测试方法,测试方案等,并对测试结果进行了分析和总结,进而得出系统的不足及需要改进的地方,为以后的系统维护和扩展提供了方便。现在的时代科技飞速地发展,网络交易已经深入大众的生活。项目开发的过程中,要按照规划、分期实施,特别是要注意在项目开发过程中要有条理,从点到面,一步步完善,不要贪图进度,要循环渐进的对项目进行开发。

ACwing 哈希算法入门:_ac算法 哈希-程序员宅基地

文章浏览阅读308次。哈希算法:将字符串映射为数字形式,十分巧妙,一般运用为进制数,进制据前人经验,一般为131,1331时重复率很低,由于字符串的数字和会很大,所以一般为了方便,一般定义为unsigned long long,爆掉时,即为对 2^64 取模,可以对于任意子序列的值进行映射为数字进而进行判断入门题目链接:AC代码:#include<bits/stdc++.h>using na..._ac算法 哈希

VS配置Qt和MySQL_在vs中 如何装qt5sqlmysql模块-程序员宅基地

文章浏览阅读952次,点赞13次,收藏27次。由于觉得Qt的编辑界面比较丑,所以想用vs2022的编辑器写Qt加MySQL的项目。_在vs中 如何装qt5sqlmysql模块

推荐文章

热门文章

相关标签