I am trying to make a react application and using material UI init. I am using Webpack to bundle everything in one file. But the size of the application gets really big when I used the material UI component.
When I check the content of the bundle.js file it shows me @material-ui on both sides src as well node_modules.
How can I remove the necessary code from node_modules as it's increasing the size of bundle.js?
This is my webpack config file:
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle-1.js',
chunkFilename: '[id].js',
publicPath: '',
},
devServer: {
contentBase: './public',
historyApiFallback: true,
compress: true,
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'],
},
{
test: /.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true,
},
},
],
include: /.module.css$/,
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
exclude: /.module.css$/,
},
],
},
// devtool: "inline-source-map",
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
filename: 'index.html',
}),
new BundleAnalyzerPlugin(),
new UglifyJsPlugin(),
],
resolve: {
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
react: path.join(__dirname, 'node_modules', 'react'),
},
},
};
question from:
https://stackoverflow.com/questions/65896881/material-ui-and-webpack-bundle