build(browser): integrate nx

[addisonbeck]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-24802

• build(cli): integrate nx #16648
• build(web): integrate nx #16706

📔 Objective

Enable Nx builds in the browser extension. For example:

# basic commands
npx nx serve browser
npx nx build browser
npx nx test browser
npx nx lint browser

# target the firefix-mv2-dev build 
npx nx serve browser --configuration=firefox-mv2-dev

# targeting a production build (no "dev" suffix)
npx nx build browser --configuration=firefox-mv2

Most complexity here is that we need to support the pre-nx build pipelines for a while, so we have to juggle both configurations. I've split webpack.config.js into webpack.nx.config.js, webpack.npm.config.js, and a shared webpack.shared.config.js. The normal webpack.config.js re-exports webpack.npm.config.js since that is what CI still expects.

In this PR in particular I also added tsconfig.build.json files that exclude stories from builds. Without this nx builds were failing due to some legitimate errors in the components project that aren't revealed by other builds. I don't condone this pattern in general, but didn't want to get distracted and decided to follow the pattern already established in the web vault with its tsconfig.build.json files already committed here and here.

Once we update CI to use Nx builds exclusively, and the Nx builds have had time to get battle tested, we'll remove the old npm builds and this configuration will get much simpler.

Otherwise, this is a fairly straightforward port of the build commands from cli's package.json into a functioning project.json. It uses the standard executors and follows Nx conventions for this kind of build without much else that is special.

📸 Screenshots

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Checkmarx One – Scan Summary & Details – 5bcfe660-5a35-4146-89c1-18e912c611c2

Great job! No new security vulnerabilities introduced in this pull request

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 38.44%. Comparing base (7c057e8) to head (0d32af4).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@                Coverage Diff                @@
##           add-nx-to-web   #16712      +/-   ##
=================================================
- Coverage          38.44%   38.44%   -0.01%     
=================================================
  Files               3409     3409              
  Lines              97402    97402              
  Branches           14624    14624              
=================================================
- Hits               37450    37447       -3     
- Misses             58324    58327       +3     
  Partials            1628     1628              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.