E:\works\ES6>gulp
[20:37:23] Failed to load external module @babel/register
[20:37:23] Requiring external module babel-register
[20:37:26] Using gulpfile E:\works\ES6\gulpfile.babel.js
[20:37:26] Starting 'build'...
[20:37:26] Starting 'clean'...
[20:37:26] Finished 'clean' after 97 ms
[20:37:26] Starting 'css'...
[20:37:26] Finished 'css' after 39 ms
[20:37:26] Starting 'pages'... [20:37:26] Finished 'pages' after 24 ms
[20:37:26] Starting 'scripts'...
E:\works\ES6\node_modules\webpack\lib\webpack.js:31
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
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 'loaders'. These properties are valid:
object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
-> Options affecting the normal modules (`NormalModuleFactory`).
at webpack (E:\works\ES6\node_modules\webpack\lib\webpack.js:31:9) at Stream.<anonymous> (E:\works\ES6\node_modules\webpack-stream\index.js:148:38)
at _end (E:\works\ES6\node_modules\through\index.js:65:9)
at Stream.stream.end (E:\works\ES6\node_modules\through\index.js:74:5)
at Stream.onend (internal/streams/legacy.js:44:10)
at emitNone (events.js:111:20) at Stream.emit (events.js:208:7)
at drain (E:\works\ES6\node_modules\through\index.js:34:23)
at Stream.stream.queue.stream.push (E:\works\ES6\node_modules\through\index.js:45:5)
at Stream.end (E:\works\ES6\node_modules\through\index.js:15:35)
.pipe(gulpWebpack({
module:{
loaders:[{
test:/\.js$/,
loader:'babel'
}),null,(err,stats)=>{
log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
chunks:false
}))
点此传送 -> 新手运行webpack 报错: unknown property ‘loaders’.
- 直接将原来的loaders改为rules就可以了!
- 原因是webpack不同的版本有不同的写法…
gulp时webpack报错:WebpackOptionsValidationError: Invalid configuration object. Webpack has been initial
错误信息如下:E:\works\ES6&amp;gt;gulp[20:37:23] Failed to load external module @babel/register[20:37:23] Requiring external module babel-register[20:37:26] Using gulpfile E:\works\ES6\gulpfile.babel.js[20:...
webpack方案
使用webpack和gulp来帮助编写redux es2015和sass的React
webpack构建React,Redux,Sass,Es2015前端原型脚手架
webpack版本为2.xx
1.环境配置
安装node版本6.0以上
clone或者下载本工程到本地
执行命令安装依赖包:
cd webpack-scheme
npm install
如果node-sass过程中报错导致无法安装,解决方法就是添加淘宝NPM并cnpm环境,然后以cnpm重新安装node-sass:
npm install -g cnpm --registry=https://registr
webpack打包错误:
Invalid configuration object.
Webpack has been
initialised using a
configuration object that does not match the API schema.
使用
webpack打包
时遇到,记录一下。
一般出现这种问题就是变量名写错了,仔细排查。
不要抱有侥幸心理,以为不是这个错误,不然就像我一样白白浪费很多
时间。
运行VUE项目报错 ERROR ValidationError: webpack Dev Server Invalid Optionsoptions.proxy should be
实际上出错信息已经说明了问题原因:
Invalid configuration object.
Webpack has been
initialised using a
configuration object that does not match the API schema.
这一...
一般在打包文件或者在生产环境基本配置的时候老是报错不知道什么原因,可能是以下问题(我报错经常的几个原因)
一、关键字没有写对,比如【module写成modules】后者【resolve写成resolver】或者【plugins写成Plugins】等等
二、某个图片或者文件路径写错了,文件名写错了
三、某个文件引入了未调用
四、你写的webpack语法过时了,无法显示
五、没有安装一些基础的插件,这个你可以查看这几个博文
学完gulp会发现webpack简单一点
总之:不要慌,先检查一下自己经常.
先来具体看一下它们不同的概念:
(1)Gulp:
Gulp是一个自动化构建工具,强调的是前端开发的流程,通过配置一系列的task,定义task处理的事物,然后定义执行顺序,来让Gulp执行task,从而构建前端项目的流程,说白了就是用来打包项目。
不管做什么功能,都有一个统一的接口进行管理,必须去注册一个任务,然后去执行,这也是它的特点之一,即“任务化”。
(2)WebPack:
WebPack是一个前端模块化方案,侧重模块打包,把开发中的所有资源(图片、js
webpack 系列 四:webpack 多页面支持 & 公共组件单独打包
webpack 系列 五:webpack Loaders 模块加载器
webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署
本篇包含以下三点:
1.区分开发环境和生产环境
2.集成gulp
3.package.json 配置
前面主要介绍了webpack 的一些基础用法,该篇做一个整体介绍,如何集成gulp?如何应对多部署环境?
gulp-webpack-project
本示例模板
这是一份帮助您学习gulp + webpack的项目示例代码。一些副本参考,请根据自己的项目进行进行修改。详情请戳 。
学习的正确
了解gulp是做什么用的;
了解webpack是做什么用的;
了解什么是前端项目的建造,什么是静态文件的打包。
使用gulp对图片,CSS文件进行打包;
使用webpack对js文件进行打包。
目录结构与说明
├─ gulp/ # gulp配置目录
├─ tasks
最近初学webpack,就遇到了很多难题。通常我们都是按照网上查找的教程来一步一步完成构建,但是我发现webpack不同的版本之间语法上存在一定的差异,可能教程是以3.0的版本来讲解的,但是我自己下了一个4.x的版本以后,使用教程来写,各种BUG。
这不,在写完配置文件后,又出现了一个新的问题。
第一个问题:_dirname is not defined.
出现这个问题的原因是在dirn...
如图所示:
我也是找了许多资料,看到这个报错中的Path,我当时以为的是应该是没问题的但是看了,但是查了资料还是没有找出错,但在看官方文档的时候发现了他output中的path是要小写的,
如图所示:
还是不够细心,一切还是要以文档为主
如有错误,还请指教!
解决报错:[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration ob
ject that does not match the API schema.
这个错误通常是因为在你的 gulpfile 中没有定义默认任务(default task)。要解决这个问题,你需要在 gulpfile 中定义一个名为 "default" 的任务:
gulp.task('default', function () {
// 你的任务代码
然后,你就可以在命令行中运行 `gulp` 来执行这个默认任务了。
gulp时webpack报错:WebpackOptionsValidationError: Invalid configuration object. Webpack has been initial
17904