Webpack Configuration for a React TypeScript Sass Styled-components.

• To run: npm start

• To build: npm run build

Documentation:

• entry: defines the entry point

• output: defines the output destination

  • filename: if passed with contenthash, it helps in caching,
  • clean: to remove previous files,
  • assetModuleFilename: passed to contain image name and extension as it is.

• devtool: boolean for devtools during development mode

• mode: passed from the script using flags and parsed via argv parameter. could also be done via env parameter but using argv parameter is recommended in docs.

• devServer: used to configure local development server that serves bundled assets and other features which facilitate development i.e. hot reloading, app openning, etc.. The app is fast because it is being server from memory rather than hard disk.

  • port: specifies port
  • static.directory: is the new contentBase
  • hot: for hot module replacement
  • open: opens the app at start
  • compress: tells the development server to compress the assets before sending them over the network, and the browser automatically decompresses them upon receipt. this increases performance and improves load time.
  • historyApiFallback: if true, navigates to index.html location if wrong url is entered. 'index:"custom-fallback-file"' and 'rewrites=array of {from,to} objects' can be passed to customize fallbacks.

• module: configures loaders.

  Loaders are required by webpack to transpile files other than JS and JSON.

• rules used to specify loaders for modules.

  • test contains regex of file extensions.
  • exclude allows to skip folders contain test files i.e. node_modules because this transpilation can be expensive.
  • use: to pass more than one loader. If it is an array, loaders will transpile from right to left.
  • loader: if there is only one loader, we can pass it in loader instead of use.
  • type: a built-in module type that allows to handle various types of assets, including images, fonts, and other files.

• resolve:

  • extensions: facilitate imports so that extension don't need to mentioned specifically.

• plugins: used to optimize build process, automate tedious tasks, and customize output to meet specific needs.

  • html-webpack-plugin: generates html files to serve the bundle.
  • copy-webpack-plugin: copies assets to output directory i.e. images, fonts, etc.
    • patterns array specifies files to copied and their destination.
    • globOptions.ignore is used to exclude desired files.