[原创] 慕课网数独学习视频,配置报错总结

webpack.config.js文件内容如下

module.exports = {
    entry:{
        index:"./js/index"
    },
    output:{
        filename:"[name].js"
    },
    devtool:"source-map",
    resolve:{
        extensions:[".js"]
    },
    module:{
        loader:[
            {
                test:/\.js$/,
                loader:"babel",
                exclude:"node_modules",
                query:{
                    presets:["es2015"]
                }
            }
        ]
    }
}

问题一,报错如下

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loader'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

这里写图片描述

【问题原因】当前使用的webpack的版本比较新,已不支持loaders,应换成rules,如下图
这里写图片描述

问题二 ,报错如下

 WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[0].exclude: The provided value "node_modules" is not an absolute path!
   -> A rule
    at webpack (F:\Workspaces\Sudoku\src\node_modules\webpack\lib\webpack.js:24:9)
    at Stream.<anonymous> (F:\Workspaces\Sudoku\src\node_modules\webpack-stream\index.js:148:38)
    at _end (F:\Workspaces\Sudoku\src\node_modules\through\index.js:65:9)
    at Stream.stream.end (F:\Workspaces\Sudoku\src\node_modules\through\index.js:74:5)
    at module.exports (F:\Workspaces\Sudoku\src\node_modules\webpack-stream\index.js:227:12)
    at Gulp.gulp.task (F:\Workspaces\Sudoku\src\gulpfile.js:7:35)
    at module.exports (F:\Workspaces\Sudoku\src\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (F:\Workspaces\Sudoku\src\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (F:\Workspaces\Sudoku\src\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (F:\Workspaces\Sudoku\src\node_modules\orchestrator\index.js:134:8)

从报错中可看到node_modules需要是绝对路径,而此处是相对路径
改变如下

这里写图片描述

问题三,报错如下

Message:
    ./js/index.js
Module build failed (from ./node_modules/babel/index.js):
Error: The node API for `babel` has been moved to `babel-core`.

这里写图片描述

问题原因:视频教程中的babel版本过低,现使用的babel库被拆分了,以前的写法是babel,最新版本需要用babel的loader的话要写成babel-loader。
修改效果如下
这里写图片描述
问题四 ,报错如下

ReferenceError: webpack is not defined

这里写图片描述

原因分析:在gulofile.js中,未把webpack设置为全局的变量,导致使用webpack报错
这里写图片描述

修改如下图即可
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值