Skip to content

Instantly share code, notes, and snippets.

@awareness481
Last active July 31, 2018 08:19
Show Gist options
  • Save awareness481/959df0e5fa2c18521978deeed8486b53 to your computer and use it in GitHub Desktop.
Save awareness481/959df0e5fa2c18521978deeed8486b53 to your computer and use it in GitHub Desktop.
webpack error
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'default'. These properties are valid:
object { mode?, amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, module?, name?, node?, output?, optimization?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack >= v2.0.0 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: {
default: …
}
})
]
scripts {
"start": "npm run build && node src/srv-compiled.js",
"build": "babel src/server.js -o src/srv-compiled.js --presets env && webpack --config webpack.prod.js --progress --profile --colors"
}
const path = require('path');
module.exports = {
entry: './src/app.js',
target: 'web',
node: {
fs: 'empty'
},
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/'
},
module: {
rules: [{
test: /\.js$/,
include: path.join(__dirname, 'src'),
exclude: [ /(node_modules|bower_components)/,
'./src/server.js',
'./src/srv-compiled.js'
],
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
}
}
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'resolve-url-loader',
'sass-loader',
],
}
]
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment