module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000, // 超過(guò)20KB才分包
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

cacheGroups: {
  vendors: {
    test: /[\\/]node_modules[\\/]/,
    name: 'vendors',
    chunks: 'all'
  }
}

cacheGroups: {
  react: {
    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
    name: 'react',
    chunks: 'all'
  },
  lodash: {
    test: /[\\/]node_modules[\\/]lodash[\\/]/,
    name: 'lodash',
    chunks: 'all'
  }
}

// React 路由配置
const Home = lazy(() => import(/* webpackChunkName: "home" */ './pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ './pages/About'));

cacheGroups: {
  commons: {
    test: /[\\/]src[\\/]components[\\/]/,
    name: 'commons',
    chunks: 'all',
    minChunks: 2 // 被2個(gè)以上chunk引用的組件
  }
}

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].js'
},
optimization: {
  moduleIds: 'deterministic',
  runtimeChunk: 'single'
}

import(/* webpackPrefetch: true */ './path/to/Modal');
import(/* webpackPreload: true */ './CriticalChart');

const ProductDetail = lazy(() => import(
  /* webpackChunkName: "product" */
  /* webpackMode: "lazy-once" */
  /* webpackPrefetch: true */
  './pages/ProductDetail'
));

splitChunks: {
  maxSize: 244 * 1024, // 244KB
  enforceSizeThreshold: {
    minSize: 30000, // 30KB
    maxSize: 244 * 1024
  }
}

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true, // 啟用多進(jìn)程
        cache: true // 啟用緩存
      })
    ]
  }
};

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

performance: {
  hints: 'warning',
  maxEntrypointSize: 500000, // 500KB
  maxAssetSize: 300000, // 300KB
  assetFilter: function(assetFilename) {
    return assetFilename.endsWith('.js');
  }
}

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxSize: 244 * 1024,
      cacheGroups: {
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
          name: 'react',
          chunks: 'all',
          priority: 20
        },
        utility: {
          test: /[\\/]node_modules[\\/](lodash|moment|axios)[\\/]/,
          name: 'utility',
          chunks: 'all',
          priority: 10
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: -10
        },
        commons: {
          test: /[\\/]src[\\/]components[\\/]/,
          name: 'commons',
          chunks: 'all',
          minChunks: 2
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.ids.HashedModuleIdsPlugin()
  ]
};

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-react', {
      runtime: 'automatic' // 減少react導(dǎo)入
    }]
  ]
};

// webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              ['import', { libraryName: 'antd', style: true }] // antd按需加載
            ]
          }
        }
      }
    ]
  }
};

splitChunks: {
  cacheGroups: {
    commons: {
      name: 'commons',
      chunks: 'initial',
      minChunks: 2
    }
  }
}

// app1/webpack.config.js
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/Button'
  },
  shared: ['react', 'react-dom']
});

// app2/webpack.config.js
new ModuleFederationPlugin({
  name: 'app2',
  remotes: {
    app1: 'app1@http://localhost:3001/remoteEntry.js'
  },
  shared: ['react', 'react-dom']
});