const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') .BundleAnalyzerPlugin const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') const WebpackBar = require('webpackbar') module.exports = (env, argv) => { const isEnvProduction = argv.mode === 'production' const isEnvDevelopment = argv.mode === 'development' return { output: { path: path.resolve(__dirname, 'build'), filename: 'static/js/[name].[contenthash:8].js', chunkFilename: 'static/js/[name].[contenthash:8].chunk.js' }, devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map', module: { rules: [ // process javascript with babel { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, // process css. css modules are enabled. { test: /\.css$/, use: [ isEnvDevelopment && 'style-loader', isEnvProduction && MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: { localIdentName: isEnvProduction ? '[hash:base64]' : '[path][name]__[local]' } } } ].filter(Boolean) } ] }, optimization: { minimize: isEnvProduction, splitChunks: { chunks: 'all', name: false }, runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` } }, plugins: [ // creat an index.html new HtmlWebpackPlugin(), // show a progress bar new WebpackBar(), // create a report.html for bundle size // extract css to css files isEnvProduction && new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:8].css', chunkFilename: 'static/css/[name].[contenthash:8].chunk.css' }), // use cssnano to minify css isEnvProduction && new OptimizeCssAssetsPlugin({ cssProcessorOptions: { map: { inline: false, annotation: true } } }), isEnvProduction && new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }) // hot reload not working right now // isEnvDevelopment && // new ReactRefreshWebpackPlugin({ disableRefreshCheck: true }) ].filter(Boolean), devServer: { stats: 'minimal' } } }