First pass on webpack5 + scss setup

.browserslistrc

@@ -0,0 +1,7 @@
+# Browsers that we support
+# Configure how you require
+# https://github.com/browserslist/browserslist
+
+last 2 versions
+> 1%
+IE 11

.gitignore

@@ -1,79 +1,2 @@
-node_modules/
-.node_modules/
-dist/*
-tests/cases/rwc/*
-tests/cases/test262/*
-tests/cases/perf/*
-!tests/cases/webharness/compilerToString.js
-test-args.txt
-~*.docx
-\#*\#
-.\#*
-tests/baselines/local/*
-tests/baselines/local.old/*
-tests/services/baselines/local/*
-tests/baselines/prototyping/local/*
-tests/baselines/rwc/*
-tests/baselines/test262/*
-tests/baselines/reference/projectOutput/*
-tests/baselines/local/projectOutput/*
-tests/baselines/reference/testresults.tap
-tests/services/baselines/prototyping/local/*
-tests/services/browser/typescriptServices.js
-src/harness/*.js
-src/compiler/diagnosticInformationMap.generated.ts
-src/compiler/diagnosticMessages.generated.json
-src/parser/diagnosticInformationMap.generated.ts
-src/parser/diagnosticMessages.generated.json
-rwc-report.html
-*.swp
-build.json
-*.actual
-tests/webTestServer.js
-tests/webTestServer.js.map
-tests/webhost/*.d.ts
-tests/webhost/webtsc.js
-tests/cases/**/*.js
-tests/cases/**/*.js.map
-*.config
-scripts/debug.bat
-scripts/run.bat
-scripts/word2md.js
-scripts/buildProtocol.js
-scripts/ior.js
-scripts/authors.js
-scripts/configurePrerelease.js
-scripts/open-user-pr.js
-scripts/processDiagnosticMessages.d.ts
-scripts/processDiagnosticMessages.js
-scripts/produceLKG.js
-scripts/importDefinitelyTypedTests/importDefinitelyTypedTests.js
-scripts/generateLocalizedDiagnosticMessages.js
-scripts/*.js.map
-scripts/typings/
-coverage/
-internal/
-**/.DS_Store
-.settings
-**/.vs
-**/.vscode
-!**/.vscode/tasks.json
-!tests/cases/projects/projectOption/**/node_modules
-!tests/cases/projects/NodeModulesSearch/**/*
-!tests/baselines/reference/project/nodeModules*/**/*
-.idea
-yarn.lock
-yarn-error.log
-.parallelperf.*
-tests/cases/user/*/package-lock.json
-tests/cases/user/*/node_modules/
-tests/cases/user/*/**/*.js
-tests/cases/user/*/**/*.js.map
-tests/cases/user/*/**/*.d.ts
-!tests/cases/user/zone.js/
-!tests/cases/user/bignumber.js/
-!tests/cases/user/discord.js/
-tests/baselines/reference/dt
-.failed-tests
-TEST-results.xml
-package-lock.json
+node_modules
+dist

README.md

@@ -1,83 +1,61 @@
 # React TypeScript Webpack Starter
 
-A very simple starter project for using React, TypeScript and Webpack, along with Jest for writing tests.
+A simple starter project for using React, TypeScript, SCSS and Webpack, along with Jest for writing tests.
+
+## Features
+- Webpack 5 + HMR
+- TypeScript + React
+- SCSS + Autoprefixing 
+- Jest
 
 ## Getting Started
 
 These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. 
 
 
-### Installing
-
-**Note:** Webpack is installed locally as recommended by the official [Webpack documentation](https://webpack.js.org/guides/installation/). 
-It makes it easy to upgrade projects individually when breaking changes are introduced. 
-
-Once you have forked and cloned off the project.
-Install the project dependencies by running
+## Development
 
-```
-yarn
-```
-Or using NPM
-```
+```shell
 npm install
+npm run dev
 ```
 
-#### Development
-We will utilise `webpack-dev-server` to run a dev server. It serves webpack projects and updates the browser automatically with any changes we make in our code.
+### Configuration
+Optional configuration for the project can be found below.
 
-You can run `webpack-dev-server --mode development` or alternatively utilise our npm scripts inside our `package.json` 
+- Open [.browerslistrc](/.browserslist) to configure Browser support for TypeScript + SCSS compiliation. [Read more here about Browerslist](https://github.com/browserslist/browserslist).
 
-```
-yarn dev
-```
-Or using NPM
-```
-npm run dev
-```
+- Open [env.config.js](/env.config.js) and you will the default configuration.
 
-#### Tests
-You can create tests in the `src/__tests__` folder. Tests are handled by [Jest](https://jestjs.io/)
+    - [Webpack devserver](https://webpack.js.org/configuration/dev-server/) - configure our local development server, e.g hostname or port.
+    - [Webpack copyWebpackPlugin](https://webpack.js.org/plugins/copy-webpack-plugin/) - folders to copy over to our dist, e.g fonts.
+    - [Webpack terserConfig](https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions) - options for production compilation. 
+    - [SCSS](https://sass-lang.com/) - the destination and filename to compile SCSS to.
 
-To run tests:
 
-```
-yarn test
-```
-Or using NPM
-```
+### Tests
+You can create tests in the `src/__tests__` folder. 
+Tests are handled by [Jest](https://jestjs.io/)
+
+```shell
 npm run test
 ```
 
-#### Production
-You can run `webpack --mode production` or the below using our npm scripts.
-```
-yarn build
-```
-Or using NPM
-```
+## Production
+Note: This will compile to a `dist` folder.
+```shell
 npm run build
 ```
 
 
-
-## Built With
+### Build tools
 
 * [React](https://reactjs.org/) - JavaScript library for building user interfaces.
 * [TypeScript](https://www.typescriptlang.org) - TypeScript is a superset of JavaScript that compiles to clean JavaScript.
-* [Webpack](https://webpack.js.org/) - App bundler for JavaScript.
+* [Webpack 5](https://webpack.js.org/) - App bundler for JavaScript.
+* [SCSS](https://sass-lang.com/) - Preprocessor for SCSS to CSS.
 * [Jest](https://jestjs.io/) - JavaScript Testing Framework.
 
-#### Required for Webpack and TypeScript
-* [Awesome Typescript Loader](https://github.com/s-panferov/awesome-typescript-loader) - Helps Webpack compile our TypeScript code using `tsconfig.json`
-
-#### Webpack Plugins
-* [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin) - Simplifies creation of HTML files to serve our webpack bundles.
-
-## License
-
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
-
-## Acknowledgments
 
-* [Saurabh Pati](https://hackernoon.com/react-with-typescript-and-webpack-654f93f34db6) - for his detailed tutorial on setting up React & TypeScript with Webpack
+### License
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

env.config.js

@@ -0,0 +1,53 @@
+// Entry points
+// https://webpack.js.org/concepts/entry-points/ 
+const entryConfig = [
+    "./src/App.ts",
+    "./src/assets/stylesheets/app.scss",
+];
+
+
+// Copy files from src to dist
+// https://webpack.js.org/plugins/copy-webpack-plugin/
+const copyPluginPatterns = {
+    patterns: [
+        { from: "./src/assets/images", to: "images" },
+        { from: "./src/assets/fonts", to: "fonts" },
+        { from: "./src/assets/vendor", to: "vendor" },
+    ]
+};
+
+
+// Dev server setup
+// https://webpack.js.org/configuration/dev-server/
+const devServer = {
+    contentBase: './dist',
+    // https: true,
+    // port: "8080",
+    // host: "your-ip4-address",
+    // disableHostCheck: true
+};
+
+
+// SCSS compile
+const scssConfig = {
+    destPath: "css",
+    destFileName: "app.min.css"
+};
+
+
+// Production terser config options
+// https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions
+const terserPluginConfig = {
+    extractComments: false,
+    terserOptions: {
+        compress: {
+            drop_console: true,
+        },
+    }
+};
+
+module.exports.copyPluginPatterns = copyPluginPatterns;
+module.exports.entryConfig = entryConfig;
+module.exports.scssConfig = scssConfig;
+module.exports.devServer = devServer;
+module.exports.terserPluginConfig = terserPluginConfig;