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

最新推荐文章于 2020-12-01 17:29:32 发布

27℃凉白开

最新推荐文章于 2020-12-01 17:29:32 发布

阅读量2k

点赞数 1

分类专栏：读书笔记前端学习总结文章标签： webpack

本文链接：https://blog.csdn.net/daxianghaoshuai/article/details/81983673

版权

前端学习总结同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

读书笔记

10 篇文章 0 订阅

订阅专栏

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报错
这里写图片描述

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