I tried to build an angularjs application with webpack. But I can't do it because of the following error. Using the v2.1.0-beta.21 of webpack, I'm seeing this error.
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?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, 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: ... } }) ] Here's my webpack config showing postcss module. Please check it and let me know what you think. I hope you will carefully review this code and provide me a great solution. I look forward to hearing a good news as soon as possible. Thanks
config.module = { preLoaders: [{ test: /\.jsx?$/, loader: 'remove-flow-types', include: path.join(__dirname, '/src/app/stepway') }], loaders: [{ // JS LOADER // Reference: https://github.com/babel/babel-loader // Transpile .js files using babel-loader // Compiles ES6 and ES7 into ES5 code test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { // CSS LOADER // Reference: https://github.com/webpack/css-loader // Allow loading css through js // // Reference: https://github.com/postcss/postcss-loader // Postprocess your css with PostCSS plugins test: /\.css$/, // Reference: https://github.com/webpack/extract-text-webpack-plugin // Extract css files in production builds // // Reference: https://github.com/webpack/style-loader // // if wanted css and js into same bundle: // Use style-loader in development. // loader: isTest ? 'null' : 'style!css!postcss' // // if wanted to separate css into another chunk file: loader: isTest ? 'null' : ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') }, { test: /\.scss$/, // // if wanted css and js into same bundle: // loader: isTest ? 'null' : 'style!css!postcss!sass' // // if wanted to separate css into another chunk file: loader: isTest ? 'null' : ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader') }, { // ASSET LOADER // Reference: https://github.com/webpack/file-loader // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output // Rename the file using the asset hash // Pass along the updated reference to your code // You can add here any file extension you want to get copied to your output test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file' }, { test: /\.json$/, loader: 'json-loader' }, { // HTML LOADER // Reference: https://github.com/webpack/raw-loader // Allow loading html through js test: /\.html$/, loader: 'raw' }] }; // ISTANBUL LOADER // https://github.com/deepsweet/istanbul-instrumenter-loader // Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting // Skips node_modules and files that end with .test if (isTest) { config.module.preLoaders.push({ test: /\.js$/, exclude: [ /node_modules/, /\.spec\.js$/ ], loader: 'istanbul-instrumenter', query: { esModules: true } }); } /** * PostCSS * Reference: https://github.com/postcss/autoprefixer-core * Add vendor prefixes to your css */ config.postcss = [ autoprefixer({ browsers: ['last 2 version'] }) ]; /** * Plugins * Reference: http://webpack.github.io/docs/configuration.html#plugins * List: http://webpack.github.io/docs/list-of-plugins.html */ config.plugins = []; // Skip rendering index.html in test mode if (!isTest && !isProd) { // Reference: https://github.com/ampedandwired/html-webpack-plugin // Render index.html config.plugins.push( // new HtmlWebpackPlugin({ // template: './src/public/index.html', // inject: 'body' // }), // Reference: https://github.com/webpack/extract-text-webpack-plugin // Extract css files // Disabled when in test mode or not in build mode // css bundle file: new ExtractTextPlugin('eda.stepway.css'), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }), new webpack.LoaderOptionsPlugin({ options: { context: __dirname, postcss: [ autoprefixer ] } }) ); } // Add build specific plugins if (isProd) { config.plugins.push( // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin // Only emit files when there are no errors new webpack.NoErrorsPlugin(), // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin // Dedupe modules in the output new webpack.optimize.DedupePlugin(), // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin // Minify all javascript, switch loaders to minimizing mode new webpack.optimize.UglifyJsPlugin(), // Copy assets from the public folder // Reference: https://github.com/kevlened/copy-webpack-plugin new CopyWebpackPlugin([{ from: __dirname + '/preview/vendors', to: __dirname + '/dist/vendors' }]), // Reference: https://github.com/webpack/extract-text-webpack-plugin // Extract css files // css bundle file: new ExtractTextPlugin('eda.stepway.css') ); }