I have found this website which basically is generating a very nice webpack/babel boilerplate structure the problem is that I have some errors when I am trying to run the boilerplate that I do not understand:
> empty-project@1.0.0 start /Users/user.name/Desktop/empty-project
> webpack serve --hot --mode development
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.plugins[3] should be one of these:
object { apply, … } | function
-> Plugin of type object or instanceof Function.
Details:
* configuration.plugins[3] should be an object:
object { apply, … }
-> Plugin instance.
* configuration.plugins[3] should be an instance of function.
-> Function acting as plugin.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! empty-project@1.0.0 start: `webpack serve --hot --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the empty-project@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
and this is webpack config file:
const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const config = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
],
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
devServer: {
contentBase: './dist'
},
plugins: [
new CopyPlugin({
patterns: [{ from: 'src/index.html' }],
}),
new HtmlWebpackPlugin({
templateContent: ({ htmlWebpackPlugin }) => '<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>' + htmlWebpackPlugin.options.title + '</title></head><body><div id=\"app\"></div></body></html>',
filename: 'index.html',
}),,
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
new MiniCssExtractPlugin(),
new CleanWebpackPlugin()
]
};
module.exports = config;
but you can also check the webpack generator, however I'm not sure why is not working :|
You have double commas after a HtmlWebpackPlugin. Just remove extra one of two ',' signs
should be:
}),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
new MiniCssExtractPlugin(),
new CleanWebpackPlugin()
]
};
module.exports = config;
currently:
}),,
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
new MiniCssExtractPlugin(),
new CleanWebpackPlugin()
]
};
module.exports = config;