运行gulp服务或构建时，Webpack配置问题与加载器 [英] Webpack config issue with loaders when running gulp serve or build
本文介绍了运行gulp服务或构建时，Webpack配置问题与加载器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于使用webpack并且使用Fountain Web App支持我的设置然后添加我自己的东西是新手。我遇到了问题，我不知道还有什么要处理。我已经搜索并尝试过，但不知道问题是由装载机还是什么造成的。
当我运行gulp serve或build时，我得到了这个：
C：\vapor\source\mgmtPortal\dashboard>吞掉服务
[14点23分43秒]加载C：\vapor\source\mgmtPortal\dashboard\gulp_tasks\browsersync .js
[14:23:43]正在载入C：\vapor\source\mgmtPortal\dashboard\gulp_tasks\karma.js
[14:23:44]正在载入C： \vapor\source\mgmtPortal\dashboard\gulp_tasks\misc.js
[14时23分44秒]加载C：\vapor\source\mgmtPortal\dashboard\gulp_tasks\\ \\webpack.js
fallbackLoader选项已被弃用 - 替换为fallback
loader选项已被弃用 - 替换为use
[14:23:45]使用gulpfile C：\\ \\ vpor \source\mgmtPortal\dashboard\gulpfile.js
[14:23:45]启动'serve'...
[14:23:45]启动'webpack：watch '...
[14:23:45]'webpack：watch'error after 121 ms
[14:23:45] WebpackOptionsValidationError：无效的配置对象。 Webpack已使用与API模式不匹配的配置对象进行初始化。
- 配置有一个未知属性'debug'。这些属性是有效的：
object {amd？，bail？，cache ?, context？，dependencies ?, devServer ?, devtool？，entry，externals ?, loader ?, module？，name ?, node？，output ？，性能？，插件？，配置文件？，recordsInputPath？，recordsOutputPath？，recordsPath ?,解析？，resolveLoader？，stats？，target？，watch ?, watchOptions？ }
在webpack 2中删除了'debug'属性。
应该更新加载器以允许通过module.rules中的加载器选项传递此选项。
在加载器更新之前，可以使用LoaderOptionsPlugin将加载器切换到调试模式：
plugins：[
new webpack.LoaderOptionsPlugin（{
debug：true
}）
]
at webpack（C：\vapor\source\mgmtPortal\dashboard\\\
ode_modules\webpack\lib\webpack.js：19：9）
at webpackWrapper（C：\vapor\source\mgmtPortal\dashboard\gulp_tasks\webpack.js：24：26）
at gulp.task.done（C：\vapor\source\ mgmtPortal\dashboard\gulp_tasks\webpack.js：15：3）
。在taskWrapper（C：\vapor\source\mgmtPortal\dashboard\\\
ode_modules\undertaker\lib\set -task.js：13：15）
在taskWrapper（C：\vapor\source\mgmtPortal\dashboard\\\
ode_modules\undertaker\lib\set-task.js:13:15 ）
在taskWrapper（C：\\\\\\\\\\\\\\\\\\\\\\\\\\\
at bound（domain.js：280：14）
at runBound（domain.js：293：12）
。在asyncRunner（C：\vapor\source\mgmtPortal\dashboard\\\
ode_modules\async-done\index.js：36：18）在_combinedTickCallback
（内部/过程/ next_tick.js ：73：7）
at process._tickCallback（internal / process / next_tick.js：104：9）
at Module.runMain（module.js：606：11）
at run bootstrap_node.js：390：7）
在启动时（bootstrap_node.js：150：9）
在bootstrap_node.js：505：3
[14:23:45]'serve'errored在127 ms之后
我的webpack配置如下所示：
const webpack = require（'webpack'）;
const conf = require（'./gulp.conf'）;
const path = require（'path'）;
const HtmlWebpackPlugin = require（'html-webpack-plugin'）;
const autoprefixer = require（'autoprefixer'）;
// const rules = {
// // ...
// componentStyles：{
// test：/\.scss$/，
// loader：[style-loader，css-loader，sass-loader]，
// exclude：path.resolve（__ dirname，'src / app'）
//}，
//字体：{
//测试：/\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0 -9] +）？$ /，
// loader：'file-loader？name = fonts / [name]。[ext]'
//}，
// // ...
//}
// const config = module.exports = {};
// config.module = {
//规则：[
// // ...
// rules.componentStyles，
/ / rules.fonts，
// // ...
//]
//};
module.exports = {
module：{
// preLoaders：[{
// test：/\.js$/，
// exclude：/ node_modules /，
// loader：'eslint'
//}]，
加载器：[{
test：/.json$ /，
加载器：[
'json'
]
}，
{
test：/\.(css|scss)$/，
loaders：[
'style'，
'css'，
'sass'，
'postcss'
]
}，
{
test：/.html$/，
loaders：[
'html'
]
}
]
} ，
插件：[
新的webpack.optimize.OccurrenceOrderPlugin（），
新的webpack.NoErr orsPlugin（），
new webpack.ProvidePlugin（{
$：jquery，
jQuery：jquery，
window.jQuery：jquery，
Tether：tether
}），
new HtmlWebpackPlugin（{
template：conf.path.src（'index.html'）
}），
new webpack.ProvidePlugin（{//将ES5模块注入全局变量
$：'jquery'，
jQuery：'jquery'，
'window.jQuery'：'jquery' ，
Tether：'tether'
}），
新的webpack.ContextReplacementPlugin（
/ angular（\\ | \ /）核心（\\ | \\ \\ \）（esm（\\ | \ /）src | src）（\\ | \ /）linker /，
conf.paths.src
）
]，
postcss：（）=> [autoprefixer]，
debug：true，
devtool：'source-map'，
output：{
path：path.join（process.cwd（），conf.paths .tmp），
文件名：'index.js'
}，
条目：`./$ {conf.path.src（'index'）}`
};
您可以帮助我吗？
非常感谢。
解决方案
<错误的行在这里：
要解决此特定错误，您需要删除 debug：true，来自你的webpack配置。错误是说 debug 参数对于Webpack 2无效，并且它只在webpack 1中有效。
<错误的行在这里：
[14:23:45] WebpackOptionsValidationError：无效的配置对象。 Webpack已使用与API模式不匹配的配置对象进行初始化。
- 配置有一个未知属性'debug'。这些属性是有效的：
object {amd？，bail？，cache ?, context？，dependencies ?, devServer ?, devtool？，entry，externals ?, loader ?, module？，name ?, node？，output ？，性能？，插件？，配置文件？，recordsInputPath？，recordsOutputPath？，recordsPath ?,解析？，resolveLoader？，stats？，target？，watch ?, watchOptions？ }
在webpack 2中删除了'debug'属性。
这听起来像是你升级了到webpack 2，可能无意中。如果是有意的，您可以在这里查看迁移指南，了解如何正确构建你的配置文件。如果您计划继续使用Webpack 2，它可能需要更多的改变。
如果这是无意的，您可以通过运行npm命令重新安装webpack，但不建议不再支持。
npm install --save webpack@1.15.0
Am new to using webpack and used Fountain Web App to scaffold my setup and then adding in my own stuff. Am running into issues I am not sure what else to do with. I have searched and tried, but not sure if the issues are being caused by loaders or what.
When I run gulp serve or build, I get this:
C:\vapor\source\mgmtPortal\dashboard>gulp serve
[14:23:43] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\browsersync.js
[14:23:43] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\karma.js
[14:23:44] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\misc.js
[14:23:44] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\webpack.js
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
[14:23:45] Using gulpfile C:\vapor\source\mgmtPortal\dashboard\gulpfile.js
[14:23:45] Starting 'serve'...
[14:23:45] Starting 'webpack:watch'...
[14:23:45] 'webpack:watch' errored after 121 ms
[14:23:45] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'debug'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
The 'debug' property was removed in webpack 2.
Loaders should be updated to allow passing this option via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to switch loaders into debug mode:
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
})
]
at webpack (C:\vapor\source\mgmtPortal\dashboard\node_modules\webpack\lib\webpack.js:19:9)
at webpackWrapper (C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\webpack.js:24:26)
at gulp.task.done (C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\webpack.js:15:3)
at taskWrapper (C:\vapor\source\mgmtPortal\dashboard\node_modules\undertaker\lib\set-task.js:13:15)
at taskWrapper (C:\vapor\source\mgmtPortal\dashboard\node_modules\undertaker\lib\set-task.js:13:15)
at taskWrapper (C:\vapor\source\mgmtPortal\dashboard\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:280:14)
at runBound (domain.js:293:12)
at asyncRunner (C:\vapor\source\mgmtPortal\dashboard\node_modules\async-done\index.js:36:18)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:390:7)
at startup (bootstrap_node.js:150:9)
at bootstrap_node.js:505:3
[14:23:45] 'serve' errored after 127 ms
My webpack config looks like this:
const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
// const rules = {
// // ...
// componentStyles: {
// test: /\.scss$/,
// loaders: ["style-loader", "css-loader", "sass-loader"],
// exclude: path.resolve(__dirname, 'src/app')
// },
// fonts: {
// test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
// loader: 'file-loader?name=fonts/[name].[ext]'
// },
// // ...
// }
// const config = module.exports = {};
// config.module = {
// rules: [
// // ...
// rules.componentStyles,
// rules.fonts,
// // ...
// ]
// };
module.exports = {
module: {
// preLoaders: [{
// test: /\.js$/,
// exclude: /node_modules/,
// loader: 'eslint'
// }],
loaders: [{
test: /.json$/,
loaders: [
'json'
]
},
{
test: /\.(css|scss)$/,
loaders: [
'style',
'css',
'sass',
'postcss'
]
},
{
test: /.html$/,
loaders: [
'html'
]
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"Tether": "tether"
}),
new HtmlWebpackPlugin({
template: conf.path.src('index.html')
}),
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether'
}),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
conf.paths.src
)
],
postcss: () => [autoprefixer],
debug: true,
devtool: 'source-map',
output: {
path: path.join(process.cwd(), conf.paths.tmp),
filename: 'index.js'
},
entry: `./${conf.path.src('index')}`
};
Can any of you lend a hand with helping me on this?
Thanks much.
解决方案
To resolve this specific error you need to remove debug: true, from your webpack config. The error is saying that the debug parameter is not valid for Webpack 2, and it was only valid in webpack 1.
The line of the error is here:
[14:23:45] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'debug'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
The 'debug' property was removed in webpack 2.
It sounds like you upgraded to webpack 2, maybe unintentionally. If it was on purpose, you can view the migration guide here, on how to properly structure your configuration file. It likely needs more changed if you plan on staying with Webpack 2.
If it was unintentional, you can reinstall webpack by running the npm command, but it is not recommended and not supported anymore.
npm install --save webpack@1.15.0
这篇关于运行gulp服务或构建时，Webpack配置问题与加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
