Fix output path not working for production builds

[cezaraugusto]

I made some changes to the main branch and now the start command is now a combination of the build + preview commands, so running yarn start <extension-path> should reflect the extension in a production environment.

To test this PR, ensure that:

1. Running yarn start <extension-path> for the React template builds the extension and loads the browser in production.
2. Running yarn start <extension-path> for the Vue.js template builds the extension and loads the browser in production.
3. Good to test the templates in different browsers such as --browser=edge or --browser=firefox --polyfill
   • Side note: if testing Firefox, ensure manifest_version is set to 2 and uses background.scripts instead of background.service_worker. For some reason I couldn't make it work using V3.
4. The background.service_worker caches while switching between between dev/start commands, so good to test toggling between these environments to assert the extension reloads as usual.
5. Ensure that during development hard-reloading (like cmd+r) a page with a content script does not prevent future HMR reloads (i.e. reloading a content_scripts extension after a manual page reload should work just fine).

Tough one!

React-TypeScript template (production mode)

Vue-TypeScript template (production mode)

Fix #95 Fix #96

[OSpoon]

I received the following error message in the console, may need to pay attention to：

[cezaraugusto]

I received the following error message in the console, may need to pay attention to：

Nice catch! Turns out it was related to MiniCssExtractPlugin. I did a change where we use the style-loader to just inject the styles into the page, so now we are working with default import statements for CSS imports and no console errors anymore.