我有一个通过在线课程创建的简单的helloworld react应用,但是出现此错误:
无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-配置具有未知属性“ postcss”。这些属性是有效的:对象{amd,bail,cache,context,dependencies,devServer,devtool,入口,外部,加载程序,模块,名称,节点,输出,性能。 ,插件,配置文件,recordsInputPath,records utputPath,recordsPath,resolve,resolveLoader,stats,target,watch,watchOptions?}对于错别字:请更正它们。 对于加载程序选项:webpack 2不再允许配置中的自定义属性。应该更新加载程序,以允许通过module.rules中的加载程序选项传递选项。在更新加载程序之前,可以使用LoaderOptionsPlugin将这些选项传递给加载程序:插件:[new webpack.LoaderOptionsPlugin({//测试:/.xxx$/,//可能仅将此功能应用于某些模块选项:{postcss: …}})]-configuration.resolve具有未知属性’root’。这些属性是有效的:object {alias?,aliasFields?,cachePredicate?,descriptionFiles?,forceExtension?,forceforceModuleExtension?,extensions,fileSystem?,mainFields,mainFiles?,moduleExtensions?,modules?,plugins?,resolver ?、符号链接?,unsafeCache ?, useSyncFileSystemCalls?}-configuration.resolve.extensions [0]不能为空。
我的webpack文件是:
// 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。 在输出中解决一些绝对路径问题。
在devServer中 object: inline: false
object: inline: false
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
{ "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" } }