无效的配置对象.Webpack 已使用与 API 架构不匹配的配置对象进行初始化 [英] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
问题描述
我从在线课程中创建了这个简单的 helloworld react 应用程序，但是出现此错误:
I have this simple helloworld react app created from an online course, however I get this error:
无效的配置对象.Webpack 已使用与 API 架构不匹配的配置对象.- 配置有一个未知的属性postcss".这些属性是有效的:object { amd?, bail?, cache?, context?, dependencies?,devServer?, devtool?, entry, externals?, loader?, module?, name?,节点?，输出?，性能?，插件?，配置文件?，记录输入路径?，记录输出路径?，记录路径?，解析?，resolveLoader?，统计?，目标?，观看?，观看选项?} 对于错别字:请更正.
对于加载器选项:webpack 2 不再允许自定义属性配置.应该更新加载器以允许通过 module.rules 中的加载器选项传递选项.在加载器更新之前，可以使用 LoaderOptionsPlugin 将这些选项传递给加载器:插件: [新的 webpack.LoaderOptionsPlugin({//测试:/.xxx$/,//可能仅适用于某些模块选项: {postcss: ...}})]- configuration.resolve 有一个未知的属性root".这些属性是有效的: object { alias?, aliasFields?,cachePredicate?、descriptionFiles?、enforceExtension?、强制模块扩展?，扩展?，文件系统?，mainFields?，mainFiles?, moduleExtensions?, modules?, plugins?, resolver?,符号链接?，unsafeCache?，useSyncFileSystemCalls?}- configuration.resolve.extensions[0] 不应为空.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'postcss'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsO utputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { postcss: ... } }) ] - configuration.resolve has an unknown property 'root'. These properties are valid: object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins ?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? } - configuration.resolve.extensions[0] should not be empty.
我的 webpack 文件是:
My webpack file is:
// work with all paths in a cross-platform manner
const path = require('path');
// plugins covered below
const { ProvidePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// configure source and distribution folder paths
const srcFolder = 'src';
const distFolder = 'dist';
// merge the common configuration with the environment specific configuration
module.exports = {
// entry point for application
entry: {
'app': path.join(__dirname, srcFolder, 'ts', 'app.tsx')
},
// allows us to require modules using
// import { someExport } from './my-module';
// instead of
// import { someExport } from './my-module.ts';
// with the extensions in the list, the extension can be omitted from the
// import from path
resolve: {
// order matters, resolves left to right
extensions: ['', '.js', '.ts', '.tsx', '.json'],
// root is an absolute path to the folder containing our application
// modules
root: path.join(__dirname, srcFolder, 'ts')
},
module: {
loaders: [
// process all TypeScript files (ts and tsx) through the TypeScript
// preprocessor
{ test: /\.tsx?$/,loader: 'ts-loader' },
// processes JSON files, useful for config files and mock data
{ test: /\.json$/, loader: 'json' },
// transpiles global SCSS stylesheets
// loader order is executed right to left
{
test: /\.scss$/,
exclude: [path.join(__dirname, srcFolder, 'ts')],
loaders: ['style', 'css', 'postcss', 'sass']
},
// process Bootstrap SCSS files
{
test: /\.scss$/,
exclude: [path.join(__dirname, srcFolder, 'scss')],
loaders: ['raw', 'sass']
}
]
},
// configuration for the postcss loader which modifies CSS after
// processing
// autoprefixer plugin for postcss adds vendor specific prefixing for
// non-standard or experimental css properties
postcss: [ require('autoprefixer') ],
plugins: [
// provides Promise and fetch API for browsers which do not support
// them
new ProvidePlugin({
'Promise': 'es6-promise',
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}),
// copies image files directly when they are changed
new CopyWebpackPlugin([{
from: path.join(srcFolder, 'images'),
to: path.join('..', 'images')
}]),
// copies the index.html file, and injects a reference to the output JS
// file, app.js
new HtmlWebpackPlugin({
template: path.join(__dirname, srcFolder, 'index.html'),
filename: path.join('..', 'index.html'),
inject: 'body',
})
],
// output file settings
// path points to web server content folder where the web server will serve
// the files from file name is the name of the files, where [name] is the
// name of each entry point
output: {
path: path.join(__dirname, distFolder, 'js'),
filename: '[name].js',
publicPath: '/js'
},
// use full source maps
// this specific setting value is required to set breakpoints in they
// TypeScript source in the web browser for development other source map
devtool: 'source-map',
// use the webpack dev server to serve up the web application
devServer: {
// files are served from this folder
contentBase: 'dist',
// support HTML5 History API for react router
historyApiFallback: true,
// listen to port 5000, change this to another port if another server
// is already listening on this port
port: 5000,
// proxy requests to the JSON server REST service
proxy: {
'/widgets': {
// server to proxy
target: 'http://0.0.0.0:3010'
}
}
}
};
推荐答案
我不知道是什么原因造成的，但我是这样解决的.
重新安装整个项目，但记住 webpack-dev-server 必须全局安装.
我解决了一些服务器错误，比如找不到 webpack，所以我使用 link 命令链接了 Webpack.
在输出中解决一些绝对路径问题.
I don't exactly know what causes that, but I solve it this way.
Reinstall whole project but remember that webpack-dev-server must be globally installed.
I walk through some server errors like webpack cant be found, so I linked Webpack using link command.
In output Resolving some absolute path issues.
在 devServer object: inline: false
In devServer object: inline: false
webpack.config.js
webpack.config.js
module.exports = {
entry: "./src/js/main.js",
output: {
path:__dirname+ '/dist/',
filename: "bundle.js",
publicPath: '/'
},
devServer: {
inline: false,
contentBase: "./dist",
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude:/(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
package.json
package.json
{
"name": "react-flux-architecture-es6",
"version": "1.0.0",
"description": "egghead",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cichy/react-flux-architecture-es6.git"
},
"keywords": [
"React",
"flux"
],
"author": "Jarosław Cichoń",
"license": "ISC",
"bugs": {
"url": "https://github.com/cichy/react-flux-architecture-es6/issues"
},
"homepage": "https://github.com/cichy/react-flux-architecture-es6#readme",
"dependencies": {
"flux": "^3.1.2",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0"
}
}
这篇关于无效的配置对象.Webpack 已使用与 API 架构不匹配的配置对象进行初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
