Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
203 views
in Technique[技术] by (71.8m points)

reactjs - Material-UI and Webpack, bundle

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?

enter image description here

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...