执行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,就会报错。修改过来即可

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐