This video below shows you how to install and run this chrome extension in x-minutes BUT read docs for the webpack file. That's quiet complex but you could skip it and still be golden. Enjoy:
https://www.loom.com/share/c499f52cf16a4a2090cffc29fc721915?sid=e9be62c4-29a6-4291-84ab-9198856c4c68
Our Webpack configuration file is the blueprint for bundling our Chrome extension project's assets. It defines entry points for Webpack to start bundling, output destination for the bundled files, and rules for handling different types of files. It uses loaders to transform source code files as they are imported and plugins for tasks like cleaning up the build directory, generating HTML files, copying static files, and injecting environment variables. Environment variables are used to manage settings between development and production builds. Lastly, it handles static files, like images, that can be imported directly into JavaScript files.
This document is a simplified guide to help Junior and Intermediate developers understand our project's Webpack setup.
The configuration file is a JavaScript object, assigned to module.exports, which contains the settings for how Webpack will run.
- Entry: The
entryproperty defines where Webpack starts bundling. In our project, we have two entry points, one for the popup page and one for the background page of our Chrome Extension. - Output: The
outputproperty defines where Webpack puts the bundle it creates. In our case, it's set to thebuildfolder in our project directory. - Module and Rules: The
moduleproperty holds arulesarray which is used to specify what loaders to use for certain files. In our case, we have different loaders for CSS, SCSS, HTML, JavaScript and TypeScript files. Loaders are transformations that are applied to the source code of a module. They allow you to preprocess files as yourequire()or "load" them. - Plugins: Plugins are used to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.
In our setup, we use dotenv to load environment variables from a .env file. We use these variables in our plugins to set up the Chrome Extension manifest and to switch between development and production builds.
We use the NODE_ENV environment variable to switch between development and production builds. In development, we enable source maps to make debugging easier. In production, we minimize our code for performance.
We use the file-loader to handle static files such as images. This means you can import images in JavaScript and get a final URL that you can use in your application.