webpack.config.js

import path from 'path'
import webpack from 'webpack'
import { merge } from 'webpack-merge'
import { fileURLToPath } from 'url'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
// import {GenerateSW} from 'workbox-webpack-plugin';

const __dirname = path.dirname(fileURLToPath(import.meta.url))

/**
 * HMR/Live Reloading broken after Webpack 5 rc.0 -> rc.1 update
 * https://github.com/webpack/webpack-dev-server/issues/2758
 *
 * target: 'web' for the moment under your development mode.
 */

const paths = {
  // Source files
  src: path.resolve(__dirname, './src'),

  // Production build files
  build: path.resolve(__dirname, './dist'),

  // Static files that get copied to build folder
  public: path.resolve(__dirname, './public')
}

/**
 * @type {import('webpack').Configuration}
 */
const prod = {
  mode: 'production',
  devtool: false,
  output: {
    path: paths.build,
    publicPath: '/',
    filename: '[name].[contenthash].bundle.js'
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
  // fix: https://github.com/webpack/webpack-dev-server/issues/2758
  target: 'browserslist',
  plugins: [
    {
      apply (compiler) {
        // allows users to load HTML page via filesystem in browser.
        compiler.hooks.compilation.tap('usePageRelativeLinks', (compilation) => {
          HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('usePageRelativeLinks', (data, cb) => {
            // Manipulate the content
            data.assetTags.scripts = data.assetTags.scripts.map((script) => {
              script.attributes.src = script.attributes.src.replace(/^\//, '')
              return script
            })

            // Tell webpack to move on
            cb(null, data)
          })
        })
      }
    }
  ]
}

/**
 * @type {import('webpack').Configuration}
 */
const dev = {
  // Set the mode to development or production
  mode: 'development',

  // Control how source maps are generated
  devtool: 'inline-source-map',

  // Where webpack outputs the assets and bundles
  output: {
    path: paths.build,
    filename: '[name].bundle.js',
    publicPath: '/'
  },

  // Spin up a server for quick development
  devServer: {
    historyApiFallback: true,
    static: paths.build,
    open: true,
    compress: true,
    // Only update what has changed on hot reload
    hot: true,
    port: 3000

  },

  plugins: [
    // Only update what has changed on hot reload
    new webpack.HotModuleReplacementPlugin()
  ]
}

/**
 * @type {import('webpack').Configuration}
 */
const common = {
// Where webpack looks to start building the bundle
  entry: [paths.src + '/index.tsx'],

  // Customize the webpack build process
  plugins: [
    // Copies files from target to destination folder
    new CopyWebpackPlugin({
      patterns: [
        {
          from: `${paths.public}/assets`,
          to: 'assets',
          globOptions: {
            ignore: ['*.DS_Store']
          },
          noErrorOnMissing: true
        }
      ]
    }),

    // fixes Module not found: Error: Can't resolve 'stream' in '.../node_modules/nofilter/lib'
    new NodePolyfillPlugin(),
    // Note: stream-browserify has assumption about `Buffer` global in its
    // dependencies causing runtime errors. This is a workaround to provide
    // global `Buffer` until https://github.com/isaacs/core-util-is/issues/29
    // is fixed.
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    }),

    // Generates an HTML file from a template
    // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
    new HtmlWebpackPlugin({
      title: 'Helia bundle by Webpack',
      favicon: paths.public + '/favicon.ico',
      template: paths.public + '/index.html', // template file
      filename: 'index.html', // output file,
      minify: false
    }),
    new webpack.DefinePlugin({
      window: 'globalThis' // attempt to naively replace all "window" keywords with "globalThis"
    })
  ],

  // Determine how modules within the project are treated
  module: {
    rules: [
      // JavaScript: Use Babel to transpile JavaScript files
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-typescript',
              [
                '@babel/preset-env',
                {
                  targets: {
                    esmodules: true
                  }
                }
              ],
              '@babel/preset-react'
            ]
          }
        }
      },

      // Images: Copy image files to build folder
      { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },

      // Fonts and SVGs: Inline files
      { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },

      { test: /\.(css)$/, use: ['style-loader', 'css-loader'] }
    ]
  },

  resolve: {
    modules: [paths.src, 'node_modules'],
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']
    // alias: {
    //   '@': paths.src
    // }
  },

  // fix: https://github.com/webpack/webpack-dev-server/issues/2758
  target: 'web',

  devtool: 'source-map',
  stats: {
    errorDetails: true,
    children: true
  },
  experiments: {
    topLevelAwait: true
  }
}

export default (cmd) => {
  const production = cmd.production
  const config = production ? prod : dev

  return merge(common, config)
}