Material-UI 和 Webpack，捆绑

Question

我正在尝试制作一个反应应用程序并使用材质 UI 初始化。我正在使用 Webpack 将所有内容捆绑在一个文件中。但是当我使用材质 UI 组件时，应用程序的大小变得非常大。

当我检查 bundle.js 文件的内容时，它会在 src 和 node_modules 的两侧显示@material-ui。 当 node_modules 增加 bundle.js 的大小时，如何从 node_modules 中删除必要的代码？

这是我的 webpack 配置文件：

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'),
    },
  },
};

Answer 1

原来我需要注释/关闭 devtool: 'inline-source-map'。