I looked at the migrate guide https://webpack.js.org/migrate/5/ but its hard to understand what I need to change. the following is the error I get
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[1].exclude has an unknown property 'test'. These properties are valid:
object { and?, not?, or? }
- configuration.node should be one of these:
false | object { __dirname?, __filename?, global? }
-> Include polyfills or mocks for various node stuff.
Details:
* configuration.node has an unknown property 'Buffer'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
* configuration.node has an unknown property 'process'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
I am using
webpack v 5.x
webpack-cli 4.x
my webpack file
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
target: ['web', 'es5'],
mode: 'development',
entry: {
app: [
'@babel/polyfill',
'./src/index.js',
],
vendor: ['react', 'moment', 'lodash/core']
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/docs',
publicPath: '/'
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
defaultVendors: {
chunks: 'initial',
name: 'vendor',
test: 'vendor',
enforce: true
},
}
},
runtimeChunk: true,
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
usedExports: true
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.js[x]?$/,
loader: 'babel-loader',
exclude: {
test: /node_modules/,
not: [/@babel\/register/],
},
options: {
cacheDirectory: false,
presets: ['@babel/preset-react'],
plugins: ['@babel/plugin-transform-runtime'], // , 'lodash'
// rootMode: "upward",
}
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: __dirname + '/docs/stylesheets',
hmr: process.env.NODE_ENV === 'development',
},
}, 'css-loader',]
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
use: 'file-loader'
},
{
test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
resolve:
{
modules: [path.join(__dirname, 'src', 'js', 'jsx'), 'node_modules'],
extensions: ['.js', '.jsx'],
fallback: {
fs: false
}
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html',
inject: true
}),
new webpack.DefinePlugin({
'process.env' : {
'NODE_ENV' : JSON.stringify(process.env.NODE_ENV || 'development'),
'REACT_APP_GA_TRACKING_ID' : JSON.stringify('UA-xxx-1'),
'VERSION' : JSON.stringify('95.7')
}
}), new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
jquery: 'jquery'
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].bundle.css',
chunkFilename: '[id].bundle.css',
ignoreOrder: false, // Enable to remove warnings about conflicting
// order
}),
new LodashModuleReplacementPlugin,
new BundleAnalyzerPlugin({
analyzerMode: 'static'
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
/*new LodashModuleReplacementPlugin({
"shorthands": true
}),*/
],
devtool: 'source-map',
externals: [],
node: {
Buffer: false,
process: false,
}
};