├── .gitignore ├── LICENSE ├── README.md ├── __older_versions └── version 3 │ ├── 00 Intro │ ├── 00 Boilerplate │ │ ├── .babelrc │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ ├── 01 Import │ │ ├── .babelrc │ │ ├── README.md │ │ ├── averageService.js │ │ ├── index.html │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ ├── 02 Server │ │ ├── .babelrc │ │ ├── README.md │ │ ├── averageService.js │ │ ├── index.html │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ ├── 03 Output │ │ ├── .babelrc │ │ ├── README.md │ │ ├── averageService.js │ │ ├── index.html │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ └── 04 JQuery │ │ ├── .babelrc │ │ ├── README.md │ │ ├── averageService.js │ │ ├── index.html │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ ├── 01 Styles │ ├── 01 Custom CSS │ │ ├── .babelrc │ │ ├── README.md │ │ ├── averageService.js │ │ ├── index.html │ │ ├── mystyles.css │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ ├── 02 Import Bootstrap │ │ ├── .babelrc │ │ ├── README.md │ │ ├── averageService.js │ │ ├── index.html │ │ ├── mystyles.css │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ ├── 03 SASS │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageService.js │ │ │ ├── index.html │ │ │ ├── mystyles.scss │ │ │ └── students.js │ │ └── webpack.config.js │ ├── 04 Handling Images │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageService.js │ │ │ ├── content │ │ │ │ ├── logo_1.png │ │ │ │ └── logo_2.png │ │ │ ├── index.html │ │ │ ├── mystyles.scss │ │ │ └── students.js │ │ └── webpack.config.js │ └── 05 Import Materialize │ │ ├── .babelrc │ │ ├── README.md │ │ ├── averageService.js │ │ ├── index.html │ │ ├── mystyles.css │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ ├── 02 Fx │ ├── 00 TypeScript │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageService.ts │ │ │ ├── index.html │ │ │ ├── mystyles.scss │ │ │ └── students.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── 01 React │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageComponent.jsx │ │ │ ├── averageService.js │ │ │ ├── index.html │ │ │ └── students.jsx │ │ └── webpack.config.js │ ├── 02 Angular │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── components │ │ │ │ └── student │ │ │ │ │ ├── studentComponent.js │ │ │ │ │ └── template.html │ │ │ ├── index.html │ │ │ └── index.js │ │ └── webpack.config.js │ └── 03 Angular 2 │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ ├── components │ │ │ └── student │ │ │ │ ├── studentComponent.ts │ │ │ │ └── template.html │ │ ├── index.html │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── 03 Environments │ ├── 01 Linting │ │ ├── .babelrc │ │ ├── .eslintrc.json │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageService.js │ │ │ ├── index.html │ │ │ ├── mystyles.scss │ │ │ └── students.js │ │ └── webpack.config.js │ ├── 02 CSS Modules │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageComponent.jsx │ │ │ ├── averageComponentStyles.scss │ │ │ ├── averageService.js │ │ │ ├── index.html │ │ │ ├── students.jsx │ │ │ ├── totalScoreComponent.jsx │ │ │ └── totalScoreComponentStyles.scss │ │ └── webpack.config.js │ ├── 03 HMR │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageComponent.jsx │ │ │ ├── averageComponentStyles.scss │ │ │ ├── averageService.js │ │ │ ├── index.html │ │ │ ├── index.jsx │ │ │ ├── students.jsx │ │ │ ├── totalScoreComponent.jsx │ │ │ └── totalScoreComponentStyles.scss │ │ └── webpack.config.js │ └── 04 Production Configuration │ │ ├── .babelrc │ │ ├── README.md │ │ ├── base.webpack.config.js │ │ ├── dev.webpack.config.js │ │ ├── package.json │ │ ├── prod.webpack.config.js │ │ └── src │ │ ├── averageComponent.jsx │ │ ├── averageComponentStyles.scss │ │ ├── averageService.js │ │ ├── index.html │ │ ├── index.jsx │ │ ├── students.jsx │ │ ├── totalScoreComponent.jsx │ │ └── totalScoreComponentStyles.scss │ ├── 04 Performance │ ├── 01 Tree Shaking ES6 │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── calculator.js │ │ │ ├── index.html │ │ │ └── index.js │ │ └── webpack.config.js │ ├── 02 Tree shaking TypeScript │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── calculator.ts │ │ │ ├── index.html │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── 03 Reduce TypeScript build time │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── calculator.ts │ │ │ ├── index.html │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ └── 04 DLL plugin │ │ ├── .babelrc │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ ├── calculator.ts │ │ ├── index.html │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── 05 Misc │ ├── 01 Commons Chunk Plugin │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageService.ts │ │ │ ├── index.html │ │ │ ├── mystyles.scss │ │ │ ├── students.ts │ │ │ └── vendor.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── 02 DefinePlugin │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── components │ │ │ │ └── student │ │ │ │ │ ├── studentComponent.ts │ │ │ │ │ └── template.html │ │ │ ├── index.html │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── 03 DefinePlugin advanced │ │ ├── .babelrc │ │ ├── README.md │ │ ├── base.webpack.config.js │ │ ├── dev.webpack.config.js │ │ ├── package.json │ │ ├── prod.webpack.config.js │ │ └── src │ │ │ ├── index.html │ │ │ ├── studentService.js │ │ │ ├── students.jsx │ │ │ └── studentsList.jsx │ ├── 04 Right pad library │ │ ├── .npmignore │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ └── rightpad.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── 05 Right pad usage │ │ ├── README.md │ │ ├── package.json │ │ ├── src │ │ │ ├── averageService.ts │ │ │ ├── index.html │ │ │ ├── mystyles.scss │ │ │ └── students.ts │ │ ├── tsconfig.json │ │ └── webpack.config.js │ └── 06 Webpack Config Reload │ │ ├── .babelrc │ │ ├── README.md │ │ ├── averageService.js │ │ ├── index.html │ │ ├── package.json │ │ ├── students.js │ │ └── webpack.config.js │ ├── 98 Commented │ ├── 00 Intro │ │ ├── 00 Boilerplate │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── students.js │ │ │ └── webpack.config.js │ │ ├── 02 Server │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── averageService.js │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── students.js │ │ │ └── webpack.config.js │ │ └── 03 Output │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── averageService.js │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ ├── students.js │ │ │ └── webpack.config.js │ └── 03 Environments │ │ └── 02 CSS Modules │ │ ├── src │ │ ├── averageComponent.jsx │ │ ├── averageComponentStyles.scss │ │ ├── totalScoreComponent.jsx │ │ └── totalScoreComponentStyles.scss │ │ └── webpack.config.js │ └── 99 Readme Resources │ ├── 00 Intro │ ├── 00 Boilerplate │ │ ├── npm init.png │ │ ├── npm start.png │ │ └── result.png │ ├── 01 Import │ │ └── result.png │ ├── 02 Server │ │ ├── result.png │ │ └── webpack-dev-server.png │ ├── 03 Output │ │ ├── bundle with hash.png │ │ ├── minified bundle.png │ │ └── sourcemaps.png │ ├── 04 JQuery │ │ ├── 01 using hashed plugin.png │ │ ├── 02 using hashed plugin.png │ │ ├── blue background.png │ │ ├── bundle after change code.png │ │ ├── bundle manifest after change code.png │ │ ├── bundle with chunkhash.png │ │ ├── bundle with manifest.png │ │ ├── import reorder.png │ │ ├── installing lodash.png │ │ └── split into app and vendor.png │ └── BONUS Auto Restart DevServer │ │ ├── commandPrompt_restart.png │ │ └── commandPrompt_start.png │ ├── 01 Styles │ ├── 01 Custom CSS │ │ ├── appStyles in console.png │ │ ├── appStyles js and css in console.png │ │ └── red background result.png │ ├── 02 Import Bootstrap │ │ ├── fail to load icons.png │ │ └── result.png │ ├── 03 SASS │ │ └── result.png │ ├── 04 Handling Images │ │ ├── browser console 2.png │ │ ├── browser console.png │ │ ├── result logo 1.png │ │ └── result logo 2.png │ └── 05 Import Materialize │ │ ├── fail to load font.png │ │ └── result.png │ ├── 02 Fx │ ├── 00 TypeScript │ │ ├── browser console.png │ │ ├── jquery typings.png │ │ └── result.png │ ├── 01 React │ │ └── result.png │ ├── 02 Angular │ │ └── result.png │ └── 03 Angular 2 │ │ ├── result after fix warnings.png │ │ ├── result.png │ │ ├── warnings angular core.png │ │ └── warnings angular coreES5.png │ ├── 03 Environments │ ├── 01 Linting │ │ ├── console error.png │ │ ├── disabling no-console rule.png │ │ ├── enable max-lines rule.png │ │ ├── eslint errors.png │ │ ├── eslint no errors.png │ │ ├── jquery error.png │ │ └── typo.png │ ├── 02 CSS Modules │ │ ├── add jumbotron styles.png │ │ ├── averageComponent styles without css modules.png │ │ ├── browser console.png │ │ ├── result.png │ │ ├── totalScoreComponent styles without css modules.png │ │ ├── using camelCase.png │ │ └── using css modules.png │ ├── 03 HMR │ │ ├── change css.gif │ │ ├── change js.gif │ │ └── chunkhash error.png │ └── 04 Production Configuration │ │ ├── build dev config.png │ │ ├── cheap source maps configuration.png │ │ ├── dev config result after clean.png │ │ ├── dev config result.png │ │ ├── prod config result after clean.png │ │ ├── prod config result.png │ │ └── result with gzipped bundles.png │ └── 04 Performance │ ├── 02 Tree shaking TypeScript │ └── build prod error.png │ ├── 03 Reduce TypeScript build time │ ├── 01 build prod.png │ ├── 01 build.png │ ├── 01 re-build.png │ ├── 01 start.png │ ├── 02 build prod.png │ ├── 02 build.png │ ├── 02 re-build.png │ ├── 02 start.png │ ├── 03 build prod.png │ ├── 03 build.png │ ├── 03 re-build.png │ └── 03 start.png │ └── 04 DLL plugin │ ├── 01 build prod.png │ ├── 01 build.png │ ├── 01 re-build.png │ ├── 01 start.png │ ├── 02 build prod.png │ ├── 02 build.png │ ├── 02 re-build.png │ └── 02 start.png └── version 4 ├── 00 intro ├── 00 zero-config │ ├── .prettierrc │ ├── package.json │ ├── readme.md │ ├── readme_es.md │ └── src │ │ └── index.js ├── 01 boilerplate │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── README_es.md │ ├── index.html │ ├── package.json │ ├── students.js │ └── webpack.config.js ├── 02 import │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── averageService.js │ ├── index.html │ ├── package.json │ ├── students.js │ └── webpack.config.js ├── 03 server │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── averageService.js │ ├── index.html │ ├── package.json │ ├── students.js │ └── webpack.config.js ├── 04 output │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── averageService.js │ ├── index.html │ ├── package.json │ ├── students.js │ └── webpack.config.js └── 05 jquery │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── averageService.js │ ├── index.html │ ├── package.json │ ├── students.js │ └── webpack.config.js ├── 01 Styles ├── 01 custom-css │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── README_ES.md │ ├── averageService.js │ ├── index.html │ ├── mystyles.css │ ├── package.json │ ├── students.js │ └── webpack.config.js ├── 02 twitter-bootstrap │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── README_ES.md │ ├── averageService.js │ ├── index.html │ ├── mystyles.css │ ├── package.json │ ├── students.js │ └── webpack.config.js ├── 03 sass │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── README_ES.md │ ├── package.json │ ├── src │ │ ├── averageService.js │ │ ├── index.html │ │ ├── mystyles.scss │ │ └── students.js │ └── webpack.config.js └── 04 images │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── README_ES.md │ ├── package.json │ ├── src │ ├── averageService.js │ ├── content │ │ ├── logo_1.png │ │ └── logo_2.png │ ├── index.html │ ├── mystyles.scss │ └── students.js │ └── webpack.config.js ├── 02 fx ├── 00 react │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── README_es.md │ ├── package.json │ ├── src │ │ ├── averageComponent.jsx │ │ ├── averageService.js │ │ ├── content │ │ │ ├── logo_1.png │ │ │ └── logo_2.png │ │ ├── index.html │ │ ├── mystyles.scss │ │ └── students.jsx │ └── webpack.config.js ├── 01 typescript │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── README_es.md │ ├── package.json │ ├── src │ │ ├── averageComponent.tsx │ │ ├── averageService.ts │ │ ├── content │ │ │ ├── logo_1.png │ │ │ └── logo_2.png │ │ ├── index.html │ │ ├── mystyles.scss │ │ └── students.tsx │ ├── tsconfig.json │ └── webpack.config.js └── 02 babel typescript │ ├── .babelrc │ ├── .prettierrc │ ├── README.md │ ├── README_es.md │ ├── package.json │ ├── src │ ├── averageComponent.tsx │ ├── averageService.ts │ ├── content │ │ ├── logo_1.png │ │ └── logo_2.png │ ├── index.html │ ├── mystyles.scss │ └── students.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 03 environments ├── 01 linting │ ├── .babelrc │ ├── .eslintrc.json │ ├── .prettierrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── averageComponent.tsx │ │ ├── averageService.ts │ │ ├── content │ │ │ ├── logo_1.png │ │ │ └── logo_2.png │ │ ├── index.html │ │ ├── mystyles.scss │ │ └── students.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 02 css modules │ ├── .babelrc │ ├── .eslintrc.json │ ├── .prettierrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── averageComponent.tsx │ │ ├── averageComponentStyles.scss │ │ ├── averageService.ts │ │ ├── content │ │ │ ├── logo_1.png │ │ │ └── logo_2.png │ │ ├── index.html │ │ ├── mystyles.scss │ │ ├── students.tsx │ │ ├── totalScoreComponent.tsx │ │ └── totalScoreComponentStyles.scss │ ├── tsconfig.json │ └── webpack.config.js ├── 03 hmr │ ├── .babelrc │ ├── .eslintrc.json │ ├── .prettierrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── averageComponent.tsx │ │ ├── averageComponentStyles.scss │ │ ├── averageService.ts │ │ ├── content │ │ │ ├── logo_1.png │ │ │ └── logo_2.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── mystyles.scss │ │ ├── students.tsx │ │ ├── totalScoreComponent.tsx │ │ └── totalScoreComponentStyles.scss │ ├── tsconfig.json │ └── webpack.config.js ├── 04 Production Configuration │ ├── .babelrc │ ├── .eslintrc.json │ ├── .prettierrc │ ├── README.md │ ├── base.webpack.config.js │ ├── dev.webpack.config.js │ ├── package.json │ ├── prod.webpack.config.js │ ├── readme-resources │ │ ├── first-time-get-static-files.png │ │ ├── fourth-time-using-gzip-files.png │ │ ├── second-time-refresh-page.png │ │ └── third-time-change-app.png │ ├── server │ │ └── index.js │ ├── src │ │ ├── averageComponent.tsx │ │ ├── averageComponentStyles.scss │ │ ├── averageService.ts │ │ ├── content │ │ │ ├── logo_1.png │ │ │ └── logo_2.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── mystyles.scss │ │ ├── students.tsx │ │ ├── totalScoreComponent.tsx │ │ └── totalScoreComponentStyles.scss │ └── tsconfig.json ├── 05 dotenv │ ├── .babelrc │ ├── .eslintrc.json │ ├── .prettierrc │ ├── README.md │ ├── base.webpack.config.js │ ├── dev.env │ ├── dev.webpack.config.js │ ├── package.json │ ├── prod.env │ ├── prod.webpack.config.js │ ├── readme-resources │ │ ├── first-time-get-static-files.png │ │ ├── fourth-time-using-gzip-files.png │ │ ├── second-time-refresh-page.png │ │ └── third-time-change-app.png │ ├── server │ │ └── index.js │ ├── src │ │ ├── averageComponent.tsx │ │ ├── averageComponentStyles.scss │ │ ├── averageService.ts │ │ ├── content │ │ │ ├── logo_1.png │ │ │ └── logo_2.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── mystyles.scss │ │ ├── students.tsx │ │ ├── totalScoreComponent.tsx │ │ └── totalScoreComponentStyles.scss │ └── tsconfig.json ├── 06 Bundle Analyzer │ ├── .babelrc │ ├── .eslintrc.json │ ├── .prettierrc │ ├── README.md │ ├── README_ES.md │ ├── base.webpack.config.js │ ├── dev.env │ ├── dev.webpack.config.js │ ├── package.json │ ├── perf.webpack.config.js │ ├── prod.env │ ├── prod.webpack.config.js │ ├── readme-resources │ │ └── bundleAnalyzer.png │ ├── server │ │ └── index.js │ ├── src │ │ ├── averageComponent.tsx │ │ ├── averageComponentStyles.scss │ │ ├── averageService.ts │ │ ├── content │ │ │ ├── logo_1.png │ │ │ └── logo_2.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── mystyles.scss │ │ ├── students.tsx │ │ ├── totalScoreComponent.tsx │ │ └── totalScoreComponentStyles.scss │ └── tsconfig.json └── 07 Webpack Monitor │ ├── .babelrc │ ├── .eslintrc.json │ ├── .prettierrc │ ├── README.md │ ├── README_ES.md │ ├── base.webpack.config.js │ ├── dev.env │ ├── dev.webpack.config.js │ ├── package.json │ ├── perf.webpack.config.js │ ├── prod.env │ ├── prod.webpack.config.js │ ├── readme-resources │ └── webpack_monitor.png │ ├── server │ └── index.js │ ├── src │ ├── averageComponent.tsx │ ├── averageComponentStyles.scss │ ├── averageService.ts │ ├── content │ │ ├── logo_1.png │ │ └── logo_2.png │ ├── index.html │ ├── index.tsx │ ├── mystyles.scss │ ├── students.tsx │ ├── totalScoreComponent.tsx │ └── totalScoreComponentStyles.scss │ └── tsconfig.json ├── 05 Misc ├── 00 Webpack Config Reload │ ├── README.md │ ├── README_es.md │ ├── averageService.js │ ├── index.html │ ├── package.json │ ├── students.js │ └── webpack.config.js ├── 07 Resolve alias │ ├── .babelrc │ ├── .env │ ├── README.md │ ├── README_es.md │ ├── config │ │ ├── helpers.js │ │ ├── test │ │ │ ├── jest.json │ │ │ └── polyfills.js │ │ └── webpack │ │ │ ├── app │ │ │ ├── base.js │ │ │ ├── dev.js │ │ │ └── prod.js │ │ │ └── common.js │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── appProvider.tsx │ │ ├── appRouter.tsx │ │ ├── common │ │ │ ├── components │ │ │ │ ├── form │ │ │ │ │ ├── button.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── input.tsx │ │ │ │ └── panel │ │ │ │ │ ├── components │ │ │ │ │ ├── body.tsx │ │ │ │ │ ├── header.tsx │ │ │ │ │ └── index.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ └── panel.tsx │ │ │ └── constants │ │ │ │ └── routes │ │ │ │ └── index.ts │ │ ├── history.ts │ │ ├── index.html │ │ ├── index.tsx │ │ ├── pages │ │ │ ├── index.ts │ │ │ ├── login │ │ │ │ ├── components │ │ │ │ │ ├── form.tsx │ │ │ │ │ ├── formProps.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── mappers.spec.ts │ │ │ │ ├── mappers.ts │ │ │ │ ├── page.tsx │ │ │ │ ├── pageContainer.tsx │ │ │ │ ├── validations.spec.ts │ │ │ │ ├── validations.ts │ │ │ │ └── viewModel.ts │ │ │ ├── members │ │ │ │ ├── index.ts │ │ │ │ └── list │ │ │ │ │ ├── components │ │ │ │ │ ├── body.tsx │ │ │ │ │ ├── header.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── row.tsx │ │ │ │ │ └── table.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── mappers.spec.ts │ │ │ │ │ ├── mappers.ts │ │ │ │ │ ├── page.tsx │ │ │ │ │ ├── pageContainer.tsx │ │ │ │ │ └── viewModel.ts │ │ │ └── reducers.ts │ │ ├── rest-api │ │ │ ├── api │ │ │ │ ├── login.ts │ │ │ │ └── member.ts │ │ │ └── model │ │ │ │ ├── index.ts │ │ │ │ ├── loginEntity.ts │ │ │ │ └── member.ts │ │ ├── routes.tsx │ │ └── store.ts │ ├── tsconfig.json │ └── tslint.json ├── 07 Webpack Lazy Loading │ ├── .babelrc │ ├── README.md │ ├── averageService.js │ ├── index.html │ ├── package.json │ ├── students.js │ └── webpack.config.js └── 08 Duplicate Package Checker │ ├── .babelrc │ ├── .eslintrc.json │ ├── .prettierrc │ ├── README.md │ ├── base.webpack.config.js │ ├── dev.env │ ├── dev.webpack.config.js │ ├── package.json │ ├── perf.webpack.config.js │ ├── prod.env │ ├── prod.webpack.config.js │ ├── server │ └── index.js │ ├── src │ ├── averageComponent.tsx │ ├── averageComponentStyles.scss │ ├── averageService.ts │ ├── content │ │ ├── logo_1.png │ │ └── logo_2.png │ ├── index.html │ ├── index.tsx │ ├── mystyles.scss │ ├── students.tsx │ ├── totalScoreComponent.tsx │ └── totalScoreComponentStyles.scss │ └── tsconfig.json └── 99 Readme Resources └── 00 Intro └── BONUS Auto Restart DevServer ├── commandPrompt_restart.PNG └── commandPrompt_start.PNG /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist/ 4 | *.orig 5 | .idea/ 6 | bundle.js 7 | package-lock.json 8 | .awcache 9 | monitor 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/00 Boilerplate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/00 Boilerplate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/00 Boilerplate/students.js: -------------------------------------------------------------------------------- 1 | // Let's use some ES6 features 2 | const averageScore = "90"; 3 | const messageToDisplay = `average score ${averageScore}`; 4 | 5 | document.write(messageToDisplay); 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/00 Boilerplate/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: ['./students.js'], 3 | output: { 4 | filename: 'bundle.js', 5 | }, 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.js$/, 10 | exclude: /node_modules/, 11 | loader: 'babel-loader', 12 | }, 13 | ], 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/01 Import/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/01 Import/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/01 Import/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/01 Import/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | const scores = [90, 75, 60, 99, 94, 30]; 4 | const averageScore = getAvg(scores); 5 | 6 | const messageToDisplay = `average score ${averageScore}`; 7 | 8 | document.write(messageToDisplay); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/01 Import/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: ['./students.js'], 3 | output: { 4 | filename: 'bundle.js', 5 | }, 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.js$/, 10 | exclude: /node_modules/, 11 | loader: 'babel-loader', 12 | }, 13 | ], 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/02 Server/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/02 Server/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/02 Server/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/02 Server/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | const scores = [90, 75, 60, 99, 94, 30]; 4 | const averageScore = getAvg(scores); 5 | 6 | const messageToDisplay = `average score ${averageScore}`; 7 | 8 | document.write(messageToDisplay); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/02 Server/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: ['./students.js'], 3 | output: { 4 | filename: 'bundle.js', 5 | }, 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.js$/, 10 | exclude: /node_modules/, 11 | loader: 'babel-loader', 12 | }, 13 | ], 14 | }, 15 | devServer: { 16 | port: 8080, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/03 Output/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/03 Output/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/03 Output/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/03 Output/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | const scores = [90, 75, 60, 99, 94, 30]; 4 | const averageScore = getAvg(scores); 5 | 6 | const messageToDisplay = `average score ${averageScore}`; 7 | 8 | document.write(messageToDisplay); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/04 JQuery/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/04 JQuery/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/04 JQuery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/00 Intro/04 JQuery/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | 8 | const messageToDisplay = `average score ${averageScore}`; 9 | 10 | document.write(messageToDisplay); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/01 Custom CSS/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/01 Custom CSS/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/01 Custom CSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 |
12 | RedBackground stuff 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/01 Custom CSS/mystyles.css: -------------------------------------------------------------------------------- 1 | .red-background { 2 | background-color: indianred; 3 | } 4 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/01 Custom CSS/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | 8 | const messageToDisplay = `average score ${averageScore}`; 9 | 10 | document.write(messageToDisplay); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/02 Import Bootstrap/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/02 Import Bootstrap/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/02 Import Bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |

Testing Bootstrap

12 |

13 | Bootstrap is the most popular ... 14 |

15 |
16 | Hello Webpack 3! 17 |
18 | RedBackground stuff 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/02 Import Bootstrap/mystyles.css: -------------------------------------------------------------------------------- 1 | .red-background { 2 | background-color: indianred; 3 | } 4 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/02 Import Bootstrap/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | 8 | const messageToDisplay = `average score ${averageScore}`; 9 | 10 | document.write(messageToDisplay); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/03 SASS/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/03 SASS/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/03 SASS/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |

Testing Bootstrap

12 |

13 | Bootstrap is the most popular ... 14 |

15 |
16 | Hello Webpack 3! 17 |
18 | RedBackground stuff 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/03 SASS/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/03 SASS/src/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | 8 | const messageToDisplay = `average score ${averageScore}`; 9 | 10 | document.write(messageToDisplay); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/04 Handling Images/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/04 Handling Images/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/04 Handling Images/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/01 Styles/04 Handling Images/src/content/logo_1.png -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/04 Handling Images/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/01 Styles/04 Handling Images/src/content/logo_2.png -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/04 Handling Images/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 | Hello Webpack 3! 12 | 13 |
14 | RedBackground stuff 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/04 Handling Images/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/04 Handling Images/src/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | import logoImg from './content/logo_1.png'; 3 | 4 | $('body').css('background-color', 'lightSkyBlue'); 5 | 6 | const scores = [90, 75, 60, 99, 94, 30]; 7 | const averageScore = getAvg(scores); 8 | 9 | const messageToDisplay = `average score ${averageScore}`; 10 | 11 | document.write(messageToDisplay); 12 | 13 | const img = document.createElement('img'); 14 | img.src = logoImg; 15 | 16 | document.getElementById('imgContainer').appendChild(img); 17 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/05 Import Materialize/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/05 Import Materialize/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/05 Import Materialize/mystyles.css: -------------------------------------------------------------------------------- 1 | .red-background { 2 | background-color: indianred; 3 | } 4 | -------------------------------------------------------------------------------- /__older_versions/version 3/01 Styles/05 Import Materialize/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | 8 | const messageToDisplay = `average score ${averageScore}`; 9 | 10 | document.write(messageToDisplay); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/00 TypeScript/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getAvg(scores): number { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores): number { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/00 TypeScript/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |

Testing Bootstrap

12 |

13 | Bootstrap is the most popular ... 14 |

15 |
16 | Hello Webpack 3! 17 |
18 | RedBackground stuff 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/00 TypeScript/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/00 TypeScript/src/students.ts: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | import * as $ from 'jquery'; 3 | 4 | $('body').css('background-color', 'lightSkyBlue'); 5 | 6 | const scores: number[] = [90, 75, 60, 99, 94, 30]; 7 | const averageScore: number = getAvg(scores); 8 | 9 | const messageToDisplay: string = `average score ${averageScore}`; 10 | 11 | document.write(messageToDisplay); 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/00 TypeScript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": false, 6 | "noImplicitAny": false, 7 | "sourceMap": true, 8 | "suppressImplicitAnyIndexErrors": true, 9 | "lib": [ 10 | "dom", 11 | "es5", 12 | "scripthost", 13 | "es2015.iterable" 14 | ] 15 | }, 16 | "compileOnSave": false, 17 | "exclude": [ 18 | "node_modules" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/01 React/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/01 React/src/averageComponent.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {getAvg} from './averageService'; 3 | 4 | export class AverageComponent extends React.Component { 5 | constructor() { 6 | super(); 7 | 8 | this.state = { 9 | scores: [90, 75, 60, 99, 94, 30], 10 | average: 0, 11 | }; 12 | } 13 | 14 | componentDidMount() { 15 | this.setState({average: getAvg(this.state.scores)}); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 | Students average: {this.state.average} 22 |
23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/01 React/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/01 React/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/01 React/src/students.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import {AverageComponent} from './averageComponent'; 4 | 5 | ReactDOM.render( 6 |
7 |

Hello from React DOM

8 | 9 |
, 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/02 Angular/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/02 Angular/src/components/student/studentComponent.js: -------------------------------------------------------------------------------- 1 | export const studentComponent = { 2 | template: require('./template.html'), 3 | controller: function() { 4 | this.message = 'Hello from student component'; 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/02 Angular/src/components/student/template.html: -------------------------------------------------------------------------------- 1 |

Message: {{$ctrl.message}}

2 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/02 Angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/02 Angular/src/index.js: -------------------------------------------------------------------------------- 1 | import * as angular from 'angular'; 2 | import {studentComponent} from './components/student/studentComponent'; 3 | 4 | const app = angular.module('myStudentApp', []); 5 | app.component('studentComponent', studentComponent); 6 | 7 | console.log(app); 8 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/03 Angular 2/src/components/student/studentComponent.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component( 4 | { 5 | selector: 'student-component', 6 | template: require('./template.html'), 7 | } 8 | ) 9 | class StudentComponent { 10 | message: string; 11 | 12 | constructor() { 13 | this.message = 'Hello from student component' 14 | } 15 | } 16 | 17 | export { 18 | StudentComponent 19 | } 20 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/03 Angular 2/src/components/student/template.html: -------------------------------------------------------------------------------- 1 |

Message: {{this.message}}

2 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/03 Angular 2/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/03 Angular 2/src/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | import { StudentComponent } from './components/student/studentComponent'; 5 | 6 | @NgModule({ 7 | declarations: [StudentComponent], 8 | imports: [BrowserModule], 9 | bootstrap: [StudentComponent], 10 | }) 11 | class AppModule { 12 | 13 | } 14 | 15 | platformBrowserDynamic().bootstrapModule(AppModule); 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/02 Fx/03 Angular 2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": false, 6 | "noImplicitAny": false, 7 | "sourceMap": true, 8 | "suppressImplicitAnyIndexErrors": true, 9 | "lib": [ 10 | "dom", 11 | "es5", 12 | "scripthost", 13 | "es2015" 14 | ], 15 | "experimentalDecorators": true, 16 | "types": [ 17 | "webpack-env" 18 | ] 19 | }, 20 | "compileOnSave": false, 21 | "exclude": [ 22 | "node_modules" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/01 Linting/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/01 Linting/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended" 4 | ], 5 | "env": { 6 | "browser": true, 7 | "node": true, 8 | "jquery": true 9 | }, 10 | "parser": "babel-eslint", 11 | "rules": { 12 | "no-console": 0, 13 | "max-lines": ["error", 1] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/01 Linting/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/01 Linting/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |

Testing Bootstrap

12 |

13 | Bootstrap is the most popular ... 14 |

15 |
16 | Hello Webpack 3! 17 |
18 | RedBackground stuff 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/01 Linting/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/01 Linting/src/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | 8 | const messageToDisplay = `average score ${averageScore}`; 9 | 10 | console.log(messageToDisplay); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/02 CSS Modules/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/02 CSS Modules/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/02 CSS Modules/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | export function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/02 CSS Modules/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/02 CSS Modules/src/students.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import {AverageComponent} from './averageComponent'; 4 | import {TotalScoreComponent} from './totalScoreComponent'; 5 | 6 | ReactDOM.render( 7 |
8 |

Hello from React DOM

9 | 10 | 11 |
, 12 | document.getElementById('root') 13 | ); 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/02 CSS Modules/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/03 HMR/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ], 9 | "react" 10 | ], 11 | "plugins": [ 12 | "react-hot-loader/babel" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/03 HMR/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/03 HMR/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | export function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/03 HMR/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/03 HMR/src/index.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppContainer } from 'react-hot-loader'; 4 | import { StudentComponent } from './students'; 5 | 6 | const render = (Component) => { 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | } 14 | 15 | render(StudentComponent); 16 | 17 | if (module.hot) { 18 | module.hot.accept('./students', () => { 19 | render(StudentComponent); 20 | }) 21 | } 22 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/03 HMR/src/students.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AverageComponent } from './averageComponent'; 3 | import { TotalScoreComponent } from './totalScoreComponent'; 4 | 5 | export const StudentComponent = () => ( 6 |
7 | 8 | 9 |
10 | ); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/03 HMR/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/04 Production Configuration/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ], 9 | "react" 10 | ], 11 | "plugins": [ 12 | "react-hot-loader/babel" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/04 Production Configuration/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/04 Production Configuration/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | export function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/04 Production Configuration/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/04 Production Configuration/src/index.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppContainer } from 'react-hot-loader'; 4 | import { StudentComponent } from './students'; 5 | 6 | const render = (Component) => { 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | } 14 | 15 | render(StudentComponent); 16 | 17 | if (module.hot) { 18 | module.hot.accept('./students', () => { 19 | render(StudentComponent); 20 | }) 21 | } 22 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/04 Production Configuration/src/students.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AverageComponent } from './averageComponent'; 3 | import { TotalScoreComponent } from './totalScoreComponent'; 4 | 5 | export const StudentComponent = () => ( 6 |
7 | 8 | 9 |
10 | ); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/03 Environments/04 Production Configuration/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/01 Tree Shaking ES6/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/01 Tree Shaking ES6/src/calculator.js: -------------------------------------------------------------------------------- 1 | export function sum(a, b) { 2 | return a + b; 3 | } 4 | 5 | export function substract(a,b) { 6 | return a - b; 7 | } 8 | 9 | export function mul(a, b) { 10 | return a * b; 11 | } 12 | 13 | export function div(a, b) { 14 | return a / b; 15 | } 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/01 Tree Shaking ES6/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/01 Tree Shaking ES6/src/index.js: -------------------------------------------------------------------------------- 1 | import {sum} from './calculator'; 2 | 3 | const result = sum(2, 2); 4 | 5 | const element = document.createElement('h1'); 6 | element.innerHTML = `Sum result: ${result}`; 7 | 8 | document.body.appendChild(element); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/02 Tree shaking TypeScript/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/02 Tree shaking TypeScript/src/calculator.ts: -------------------------------------------------------------------------------- 1 | export function sum(a, b) { 2 | return a + b; 3 | } 4 | 5 | export function substract(a,b) { 6 | return a - b; 7 | } 8 | 9 | export function mul(a, b) { 10 | return a * b; 11 | } 12 | 13 | export function div(a, b) { 14 | return a / b; 15 | } 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/02 Tree shaking TypeScript/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/02 Tree shaking TypeScript/src/index.ts: -------------------------------------------------------------------------------- 1 | import {sum} from './calculator'; 2 | 3 | const result = sum(2, 2); 4 | 5 | const element = document.createElement('h1'); 6 | element.innerHTML = `Sum result: ${result}`; 7 | 8 | document.body.appendChild(element); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/02 Tree shaking TypeScript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "noLib": false, 10 | "suppressImplicitAnyIndexErrors": true 11 | }, 12 | "compileOnSave": false, 13 | "exclude": [ 14 | "node_modules" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/03 Reduce TypeScript build time/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/03 Reduce TypeScript build time/src/calculator.ts: -------------------------------------------------------------------------------- 1 | export function sum(a, b) { 2 | return a + b; 3 | } 4 | 5 | export function substract(a,b) { 6 | return a - b; 7 | } 8 | 9 | export function mul(a, b) { 10 | return a * b; 11 | } 12 | 13 | export function div(a, b) { 14 | return a / b; 15 | } 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/03 Reduce TypeScript build time/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/03 Reduce TypeScript build time/src/index.ts: -------------------------------------------------------------------------------- 1 | import {sum} from './calculator'; 2 | 3 | const result = sum(2, 2); 4 | 5 | const element = document.createElement('h1'); 6 | element.innerHTML = `Sum result: ${result}`; 7 | 8 | document.body.appendChild(element); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/03 Reduce TypeScript build time/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "noLib": false, 10 | "suppressImplicitAnyIndexErrors": true 11 | }, 12 | "compileOnSave": false, 13 | "exclude": [ 14 | "node_modules" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/04 DLL plugin/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/04 DLL plugin/src/calculator.ts: -------------------------------------------------------------------------------- 1 | export function sum(a, b) { 2 | return a + b; 3 | } 4 | 5 | export function substract(a,b) { 6 | return a - b; 7 | } 8 | 9 | export function mul(a, b) { 10 | return a * b; 11 | } 12 | 13 | export function div(a, b) { 14 | return a / b; 15 | } 16 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/04 DLL plugin/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/04 DLL plugin/src/index.ts: -------------------------------------------------------------------------------- 1 | import {sum} from './calculator'; 2 | 3 | const result = sum(2, 2); 4 | 5 | const element = document.createElement('h1'); 6 | element.innerHTML = `Sum result: ${result}`; 7 | 8 | document.body.appendChild(element); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/04 Performance/04 DLL plugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "noLib": false, 10 | "suppressImplicitAnyIndexErrors": true 11 | }, 12 | "compileOnSave": false, 13 | "exclude": [ 14 | "node_modules" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/01 Commons Chunk Plugin/README.md: -------------------------------------------------------------------------------- 1 | # 01 Commons Chunk Plugin 2 | 3 | TBD 4 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/01 Commons Chunk Plugin/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getAvg(scores): number { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores): number { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/01 Commons Chunk Plugin/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |

Testing Bootstrap

12 |

13 | Bootstrap is the most popular ... 14 |

15 |
16 | Hello Webpack 3! 17 |
18 | RedBackground stuff 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/01 Commons Chunk Plugin/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/01 Commons Chunk Plugin/src/students.ts: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | import * as $ from 'jquery'; 3 | import leftPad = require('left-pad'); 4 | 5 | $('body').css('background-color', 'lightSkyBlue'); 6 | 7 | const scores: number[] = [90, 75, 60, 99, 94, 30]; 8 | const averageScore: number = getAvg(scores); 9 | 10 | const messageToDisplay: string = leftPad(`average score ${averageScore}`, 35, 'jorobateflanders'); 11 | 12 | document.write(messageToDisplay); 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/01 Commons Chunk Plugin/src/vendor.ts: -------------------------------------------------------------------------------- 1 | import 'jquery'; 2 | import 'left-pad'; 3 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/01 Commons Chunk Plugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": false, 6 | "noImplicitAny": false, 7 | "sourceMap": true, 8 | "suppressImplicitAnyIndexErrors": true, 9 | "lib": [ 10 | "dom", 11 | "es5", 12 | "scripthost", 13 | "es2015.iterable" 14 | ] 15 | }, 16 | "compileOnSave": false, 17 | "exclude": [ 18 | "node_modules" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/02 DefinePlugin/README.md: -------------------------------------------------------------------------------- 1 | TBD 2 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/02 DefinePlugin/src/components/student/studentComponent.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component( 4 | { 5 | selector: 'student-component', 6 | template: require('./template.html'), 7 | } 8 | ) 9 | class StudentComponent { 10 | message: string; 11 | 12 | constructor() { 13 | this.message = 'Hello from student component' 14 | } 15 | } 16 | 17 | export { 18 | StudentComponent 19 | } 20 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/02 DefinePlugin/src/components/student/template.html: -------------------------------------------------------------------------------- 1 |

Message: {{this.message}}

2 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/02 DefinePlugin/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/02 DefinePlugin/src/index.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode, NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | import { StudentComponent } from './components/student/studentComponent'; 5 | 6 | @NgModule({ 7 | declarations: [StudentComponent], 8 | imports: [BrowserModule], 9 | bootstrap: [StudentComponent], 10 | }) 11 | class AppModule { 12 | 13 | } 14 | 15 | if (process.env.NODE_ENV === 'production') { 16 | enableProdMode(); 17 | } 18 | 19 | platformBrowserDynamic().bootstrapModule(AppModule); 20 | 21 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/02 DefinePlugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": false, 6 | "noImplicitAny": false, 7 | "sourceMap": true, 8 | "suppressImplicitAnyIndexErrors": true, 9 | "lib": [ 10 | "dom", 11 | "es5", 12 | "scripthost", 13 | "es2015" 14 | ], 15 | "experimentalDecorators": true, 16 | "types": [ 17 | "webpack-env", 18 | "node" 19 | ] 20 | }, 21 | "compileOnSave": false, 22 | "exclude": [ 23 | "node_modules" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/03 DefinePlugin advanced/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ], 9 | "react" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/03 DefinePlugin advanced/README.md: -------------------------------------------------------------------------------- 1 | TBD 2 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/03 DefinePlugin advanced/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/03 DefinePlugin advanced/src/studentService.js: -------------------------------------------------------------------------------- 1 | export function getStudents() { 2 | return fetch(process.env.API_URL) 3 | .then((response) => { 4 | return response.json(); 5 | }); 6 | } 7 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/03 DefinePlugin advanced/src/students.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import {StudentsListComponent} from './studentsList'; 4 | 5 | ReactDOM.render( 6 |
7 |

List of students

8 | 9 |
, 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/04 Right pad library/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | src/ 3 | tsconfig.json 4 | webpack.config.js 5 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/04 Right pad library/README.md: -------------------------------------------------------------------------------- 1 | TBD 2 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/04 Right pad library/src/rightpad.ts: -------------------------------------------------------------------------------- 1 | export default function rightPad(original: string, quantity: number, word: string): string { 2 | const remainingSpace = quantity - original.length; 3 | const howManyWords = Math.floor(remainingSpace / word.length); 4 | 5 | return `${original}${word.repeat(howManyWords)}`; 6 | } 7 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/04 Right pad library/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": true, 6 | "outDir": "dist", 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "lib": ["es2015", "dom"], 10 | "suppressImplicitAnyIndexErrors": true 11 | }, 12 | "compileOnSave": false, 13 | "exclude": [ 14 | "node_modules" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/04 Right pad library/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './src/rightpad.ts', 3 | output: { 4 | filename: 'dist/rightpad.js', 5 | library: 'rightPad', 6 | libraryTarget: 'umd' 7 | }, 8 | devtool: 'source-map', 9 | module: { 10 | rules: [ 11 | { 12 | test: /\.ts$/, 13 | loader: 'awesome-typescript-loader', 14 | }, 15 | ] 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/05 Right pad usage/README.md: -------------------------------------------------------------------------------- 1 | TBD 2 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/05 Right pad usage/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getAvg(scores): number { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores): number { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/05 Right pad usage/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 |
11 |

Testing Bootstrap

12 |

13 | Bootstrap is the most popular ... 14 |

15 |
16 | Hello Webpack 3! 17 |
18 | RedBackground stuff 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/05 Right pad usage/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/05 Right pad usage/src/students.ts: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | import * as $ from 'jquery'; 3 | import rightPad from 'right-pad'; 4 | 5 | $('body').css('background-color', 'lightSkyBlue'); 6 | 7 | const scores: number[] = [90, 75, 60, 99, 94, 30]; 8 | const averageScore: number = getAvg(scores); 9 | 10 | const messageToDisplay: string = rightPad(`average score ${averageScore}`, 50, 'jorobateflanders'); 11 | 12 | document.write(messageToDisplay); 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/05 Right pad usage/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": false, 6 | "noImplicitAny": false, 7 | "sourceMap": true, 8 | "suppressImplicitAnyIndexErrors": true, 9 | "lib": [ 10 | "dom", 11 | "es5", 12 | "scripthost", 13 | "es2015.iterable" 14 | ] 15 | }, 16 | "compileOnSave": false, 17 | "exclude": [ 18 | "node_modules" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/06 Webpack Config Reload/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/06 Webpack Config Reload/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/06 Webpack Config Reload/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/05 Misc/06 Webpack Config Reload/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | 8 | const messageToDisplay = `average score ${averageScore}`; 9 | 10 | document.write(messageToDisplay); 11 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/00 Boilerplate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/00 Boilerplate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/00 Boilerplate/students.js: -------------------------------------------------------------------------------- 1 | // Let's use some ES6 features 2 | const averageScore = "90"; 3 | const messageToDisplay = `average score ${averageScore}`; 4 | 5 | document.write(messageToDisplay); 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/02 Server/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/02 Server/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/02 Server/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/02 Server/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | const scores = [90, 75, 60, 99, 94, 30]; 4 | const averageScore = getAvg(scores); 5 | 6 | const messageToDisplay = `average score ${averageScore}`; 7 | 8 | document.write(messageToDisplay); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/03 Output/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/03 Output/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => { 7 | return score + count; 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/03 Output/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 3.x by sample 8 | 9 | 10 | Hello Webpack 3! 11 | 12 | 13 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/00 Intro/03 Output/students.js: -------------------------------------------------------------------------------- 1 | import {getAvg} from "./averageService"; 2 | 3 | const scores = [90, 75, 60, 99, 94, 30]; 4 | const averageScore = getAvg(scores); 5 | 6 | const messageToDisplay = `average score ${averageScore}`; 7 | 8 | document.write(messageToDisplay); 9 | -------------------------------------------------------------------------------- /__older_versions/version 3/98 Commented/03 Environments/02 CSS Modules/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; // We are using the same name for different CSS rules in separate CSS files 5 | } 6 | -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/00 Boilerplate/npm init.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/00 Boilerplate/npm init.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/00 Boilerplate/npm start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/00 Boilerplate/npm start.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/00 Boilerplate/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/00 Boilerplate/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/01 Import/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/01 Import/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/02 Server/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/02 Server/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/02 Server/webpack-dev-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/02 Server/webpack-dev-server.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/03 Output/bundle with hash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/03 Output/bundle with hash.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/03 Output/minified bundle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/03 Output/minified bundle.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/03 Output/sourcemaps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/03 Output/sourcemaps.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/01 using hashed plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/01 using hashed plugin.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/02 using hashed plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/02 using hashed plugin.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/blue background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/blue background.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/bundle after change code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/bundle after change code.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/bundle manifest after change code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/bundle manifest after change code.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/bundle with chunkhash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/bundle with chunkhash.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/bundle with manifest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/bundle with manifest.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/import reorder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/import reorder.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/installing lodash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/installing lodash.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/split into app and vendor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/04 JQuery/split into app and vendor.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/BONUS Auto Restart DevServer/commandPrompt_restart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/BONUS Auto Restart DevServer/commandPrompt_restart.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/00 Intro/BONUS Auto Restart DevServer/commandPrompt_start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/00 Intro/BONUS Auto Restart DevServer/commandPrompt_start.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/01 Custom CSS/appStyles in console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/01 Custom CSS/appStyles in console.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/01 Custom CSS/appStyles js and css in console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/01 Custom CSS/appStyles js and css in console.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/01 Custom CSS/red background result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/01 Custom CSS/red background result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/02 Import Bootstrap/fail to load icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/02 Import Bootstrap/fail to load icons.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/02 Import Bootstrap/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/02 Import Bootstrap/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/03 SASS/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/03 SASS/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/04 Handling Images/browser console 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/04 Handling Images/browser console 2.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/04 Handling Images/browser console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/04 Handling Images/browser console.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/04 Handling Images/result logo 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/04 Handling Images/result logo 1.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/04 Handling Images/result logo 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/04 Handling Images/result logo 2.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/05 Import Materialize/fail to load font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/05 Import Materialize/fail to load font.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/01 Styles/05 Import Materialize/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/01 Styles/05 Import Materialize/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/00 TypeScript/browser console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/00 TypeScript/browser console.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/00 TypeScript/jquery typings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/00 TypeScript/jquery typings.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/00 TypeScript/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/00 TypeScript/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/01 React/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/01 React/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/02 Angular/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/02 Angular/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/03 Angular 2/result after fix warnings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/03 Angular 2/result after fix warnings.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/03 Angular 2/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/03 Angular 2/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/03 Angular 2/warnings angular core.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/03 Angular 2/warnings angular core.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/02 Fx/03 Angular 2/warnings angular coreES5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/02 Fx/03 Angular 2/warnings angular coreES5.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/console error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/console error.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/disabling no-console rule.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/disabling no-console rule.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/enable max-lines rule.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/enable max-lines rule.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/eslint errors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/eslint errors.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/eslint no errors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/eslint no errors.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/jquery error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/jquery error.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/typo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/01 Linting/typo.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/add jumbotron styles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/add jumbotron styles.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/averageComponent styles without css modules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/averageComponent styles without css modules.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/browser console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/browser console.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/totalScoreComponent styles without css modules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/totalScoreComponent styles without css modules.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/using camelCase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/using camelCase.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/using css modules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/02 CSS Modules/using css modules.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/03 HMR/change css.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/03 HMR/change css.gif -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/03 HMR/change js.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/03 HMR/change js.gif -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/03 HMR/chunkhash error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/03 HMR/chunkhash error.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/build dev config.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/build dev config.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/cheap source maps configuration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/cheap source maps configuration.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/dev config result after clean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/dev config result after clean.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/dev config result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/dev config result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/prod config result after clean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/prod config result after clean.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/prod config result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/prod config result.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/result with gzipped bundles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/03 Environments/04 Production Configuration/result with gzipped bundles.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/02 Tree shaking TypeScript/build prod error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/02 Tree shaking TypeScript/build prod error.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/01 build prod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/01 build prod.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/01 build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/01 build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/01 re-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/01 re-build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/01 start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/01 start.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/02 build prod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/02 build prod.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/02 build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/02 build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/02 re-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/02 re-build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/02 start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/02 start.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/03 build prod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/03 build prod.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/03 build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/03 build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/03 re-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/03 re-build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/03 start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/03 Reduce TypeScript build time/03 start.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/01 build prod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/01 build prod.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/01 build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/01 build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/01 re-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/01 re-build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/01 start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/01 start.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/02 build prod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/02 build prod.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/02 build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/02 build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/02 re-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/02 re-build.png -------------------------------------------------------------------------------- /__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/02 start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/__older_versions/version 3/99 Readme Resources/04 Performance/04 DLL plugin/02 start.png -------------------------------------------------------------------------------- /version 4/00 intro/00 zero-config/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/00 intro/00 zero-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-by-sample", 3 | "version": "1.0.0", 4 | "description": "One of the new features announced by webpack is the possibility of using this package with zero configuration,\r just if you follow some conventions you won't need to create a config file.", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --mode development", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^4.29.6", 14 | "webpack-cli": "^3.2.3" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /version 4/00 intro/00 zero-config/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('Look ma! Zero config'); -------------------------------------------------------------------------------- /version 4/00 intro/01 boilerplate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/00 intro/01 boilerplate/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/00 intro/01 boilerplate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 | Hello Webpack 4! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /version 4/00 intro/01 boilerplate/students.js: -------------------------------------------------------------------------------- 1 | // Let's use some ES6 features 2 | const averageScore = '90'; 3 | const messageToDisplay = `average score ${averageScore}`; 4 | 5 | document.write(messageToDisplay); 6 | -------------------------------------------------------------------------------- /version 4/00 intro/01 boilerplate/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: ['regenerator-runtime/runtime', './students.js'], 3 | output: { 4 | filename: 'bundle.js', 5 | }, 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.js$/, 10 | exclude: /node_modules/, 11 | loader: 'babel-loader', 12 | }, 13 | ], 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /version 4/00 intro/02 import/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/00 intro/02 import/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/00 intro/02 import/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/00 intro/02 import/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 | Hello Webpack 4! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /version 4/00 intro/02 import/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | const scores = [90, 75, 60, 99, 94, 30]; 3 | const averageScore = getAvg(scores); 4 | const messageToDisplay = `average score ${averageScore}`; 5 | 6 | document.write(messageToDisplay); 7 | -------------------------------------------------------------------------------- /version 4/00 intro/02 import/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: ['regenerator-runtime/runtime', './students.js'], 3 | output: { 4 | filename: 'bundle.js', 5 | }, 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.js$/, 10 | exclude: /node_modules/, 11 | loader: 'babel-loader', 12 | }, 13 | ], 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /version 4/00 intro/03 server/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/00 intro/03 server/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/00 intro/03 server/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/00 intro/03 server/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 | Hello Webpack 4! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /version 4/00 intro/03 server/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | const scores = [90, 75, 60, 99, 94, 30]; 3 | const averageScore = getAvg(scores); 4 | const messageToDisplay = `average score ${averageScore}`; 5 | 6 | document.write(messageToDisplay); 7 | -------------------------------------------------------------------------------- /version 4/00 intro/03 server/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: ['regenerator-runtime/runtime', './students.js'], 3 | output: { 4 | filename: 'bundle.js', 5 | }, 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.js$/, 10 | exclude: /node_modules/, 11 | loader: 'babel-loader', 12 | }, 13 | ], 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /version 4/00 intro/04 output/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/00 intro/04 output/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/00 intro/04 output/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/00 intro/04 output/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 | Hello Webpack 4! 11 | 12 | 13 | -------------------------------------------------------------------------------- /version 4/00 intro/04 output/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | const scores = [90, 75, 60, 99, 94, 30]; 3 | const averageScore = getAvg(scores); 4 | const messageToDisplay = `average score ${averageScore}`; 5 | 6 | document.write(messageToDisplay); 7 | -------------------------------------------------------------------------------- /version 4/00 intro/05 jquery/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/00 intro/05 jquery/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/00 intro/05 jquery/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/00 intro/05 jquery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 | Hello Webpack 4! 11 | 12 | 13 | -------------------------------------------------------------------------------- /version 4/00 intro/05 jquery/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | const messageToDisplay = `average score ${averageScore}`; 8 | 9 | document.write(messageToDisplay); 10 | -------------------------------------------------------------------------------- /version 4/01 Styles/01 custom-css/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/01 Styles/01 custom-css/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/01 Styles/01 custom-css/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/01 Styles/01 custom-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 | Hello Webpack 4! 11 |
12 | RedBackground stuff 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /version 4/01 Styles/01 custom-css/mystyles.css: -------------------------------------------------------------------------------- 1 | .red-background { 2 | background-color: indianred; 3 | } 4 | -------------------------------------------------------------------------------- /version 4/01 Styles/01 custom-css/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | const messageToDisplay = `average score ${averageScore}`; 8 | 9 | document.write(messageToDisplay); 10 | -------------------------------------------------------------------------------- /version 4/01 Styles/02 twitter-bootstrap/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/01 Styles/02 twitter-bootstrap/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/01 Styles/02 twitter-bootstrap/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/01 Styles/02 twitter-bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |

Testing Bootstrap

12 |

13 | Bootstrap is the most popular ... 14 |

15 |
16 | 17 | Hello Webpack 4! 18 |
19 | RedBackground stuff 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /version 4/01 Styles/02 twitter-bootstrap/mystyles.css: -------------------------------------------------------------------------------- 1 | .red-background { 2 | background-color: indianred; 3 | } 4 | -------------------------------------------------------------------------------- /version 4/01 Styles/02 twitter-bootstrap/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | const messageToDisplay = `average score ${averageScore}`; 8 | 9 | document.write(messageToDisplay); 10 | -------------------------------------------------------------------------------- /version 4/01 Styles/03 sass/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/01 Styles/03 sass/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/01 Styles/03 sass/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/01 Styles/03 sass/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |

Testing Bootstrap

12 |

13 | Bootstrap is the most popular ... 14 |

15 |
16 | 17 | Hello Webpack 4! 18 |
19 | RedBackground stuff 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /version 4/01 Styles/03 sass/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/01 Styles/03 sass/src/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | const messageToDisplay = `average score ${averageScore}`; 8 | 9 | document.write(messageToDisplay); 10 | -------------------------------------------------------------------------------- /version 4/01 Styles/04 images/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/01 Styles/04 images/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/01 Styles/04 images/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/01 Styles/04 images/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/01 Styles/04 images/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/01 Styles/04 images/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/01 Styles/04 images/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/01 Styles/04 images/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 | 12 | Hello Webpack 4! 13 | 14 |
15 | RedBackground stuff 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /version 4/01 Styles/04 images/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/01 Styles/04 images/src/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from './averageService'; 2 | import logoImg from './content/logo_1.png'; 3 | 4 | $('body').css('background-color', 'lightSkyBlue'); 5 | 6 | const scores = [90, 75, 60, 99, 94, 30]; 7 | const averageScore = getAvg(scores); 8 | const messageToDisplay = `average score ${averageScore}`; 9 | 10 | document.write(messageToDisplay); 11 | 12 | const img = document.createElement('img'); 13 | img.src = logoImg; 14 | 15 | document.getElementById('imgContainer').appendChild(img); 16 | -------------------------------------------------------------------------------- /version 4/02 fx/00 react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/02 fx/00 react/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/02 fx/00 react/src/averageComponent.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { getAvg } from './averageService'; 3 | 4 | export const AverageComponent = () => { 5 | const [average, setAverage] = React.useState(0); 6 | 7 | React.useEffect(() => { 8 | const scores = [90, 75, 60, 99, 94, 30]; 9 | setAverage(getAvg(scores)); 10 | }, []); 11 | 12 | return ( 13 |
14 | Students average: {average} 15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /version 4/02 fx/00 react/src/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/02 fx/00 react/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/02 fx/00 react/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/02 fx/00 react/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/02 fx/00 react/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/02 fx/00 react/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/02 fx/00 react/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/02 fx/00 react/src/students.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { AverageComponent } from './averageComponent'; 4 | import logoImg from './content/logo_1.png'; 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const img = document.createElement('img'); 9 | img.src = logoImg; 10 | 11 | document.getElementById('imgContainer').appendChild(img); 12 | 13 | ReactDOM.render( 14 |
15 |

Hello from React DOM

16 | 17 |
, 18 | document.getElementById('root') 19 | ); 20 | -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/src/averageComponent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { getAvg } from './averageService'; 3 | 4 | export const AverageComponent: React.FunctionComponent = () => { 5 | const [average, setAverage] = React.useState(0); 6 | 7 | React.useEffect(() => { 8 | const scores: number[] = [90, 75, 60, 99, 94, 30]; 9 | setAverage(getAvg(scores)); 10 | }, []); 11 | 12 | return ( 13 |
14 | Students average: {average} 15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getAvg(scores: number[]): number { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores: number[]): number { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/02 fx/01 typescript/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/02 fx/01 typescript/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { AverageComponent } from './averageComponent'; 4 | const logoImg = require('./content/logo_1.png'); 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const img = document.createElement('img'); 9 | img.src = logoImg; 10 | 11 | document.getElementById('imgContainer').appendChild(img); 12 | 13 | ReactDOM.render( 14 |
15 |

Hello from React DOM

16 | 17 |
, 18 | document.getElementById('root') 19 | ); 20 | -------------------------------------------------------------------------------- /version 4/02 fx/01 typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react", 5 | "@babel/preset-typescript" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/src/averageComponent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { getAvg } from './averageService'; 3 | 4 | export const AverageComponent: React.FunctionComponent = () => { 5 | const [average, setAverage] = React.useState(0); 6 | 7 | React.useEffect(() => { 8 | const scores: number[] = [90, 75, 60, 99, 94, 30]; 9 | setAverage(getAvg(scores)); 10 | }, []); 11 | 12 | return ( 13 |
14 | Students average: {average} 15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getAvg(scores: number[]): number { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores: number[]): number { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/02 fx/02 babel typescript/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/02 fx/02 babel typescript/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { AverageComponent } from './averageComponent'; 4 | const logoImg = require('./content/logo_1.png'); 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const img = document.createElement('img'); 9 | img.src = logoImg; 10 | 11 | document.getElementById('imgContainer').appendChild(img); 12 | 13 | ReactDOM.render( 14 |
15 |

Hello from React DOM

16 | 17 |
, 18 | document.getElementById('root') 19 | ); 20 | -------------------------------------------------------------------------------- /version 4/02 fx/02 babel typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:@typescript-eslint/recommended", 4 | "plugin:react/recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "@typescript-eslint/parser", 11 | "plugins": ["@typescript-eslint"], 12 | "rules": { 13 | "@typescript-eslint/no-var-requires": 0 14 | }, 15 | "settings": { 16 | "react": { 17 | "version": "detect" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/src/averageComponent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { getAvg } from './averageService'; 3 | 4 | export const AverageComponent: React.FunctionComponent = () => { 5 | const [average, setAverage] = React.useState(0); 6 | 7 | React.useEffect(() => { 8 | const scores: number[] = [90, 75, 60, 99, 94, 30]; 9 | setAverage(getAvg(scores)); 10 | }, []); 11 | 12 | return ( 13 |
14 | Students average: {average} 15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/src/averageService.ts: -------------------------------------------------------------------------------- 1 | function getTotalScore(scores: number[]): number { 2 | return scores.reduce((score, count) => score + count); 3 | } 4 | 5 | export function getAvg(scores: number[]): number { 6 | return getTotalScore(scores) / scores.length; 7 | } 8 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/01 linting/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/01 linting/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { AverageComponent } from './averageComponent'; 4 | const logoImg = require('./content/logo_1.png'); 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const img = document.createElement('img'); 9 | img.src = logoImg; 10 | 11 | document.getElementById('imgContainer').appendChild(img); 12 | 13 | ReactDOM.render( 14 |
15 |

Hello from React DOM

16 | 17 |
, 18 | document.getElementById('root') 19 | ); 20 | -------------------------------------------------------------------------------- /version 4/03 environments/01 linting/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:@typescript-eslint/recommended", 4 | "plugin:react/recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "@typescript-eslint/parser", 11 | "plugins": ["@typescript-eslint"], 12 | "rules": { 13 | "@typescript-eslint/no-var-requires": 0 14 | }, 15 | "settings": { 16 | "react": { 17 | "version": "detect" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getTotalScore(scores: number[]): number { 2 | return scores.reduce((score, count) => score + count); 3 | } 4 | 5 | export function getAvg(scores: number[]): number { 6 | return getTotalScore(scores) / scores.length; 7 | } 8 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/02 css modules/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/02 css modules/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/02 css modules/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["react-hot-loader/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:@typescript-eslint/recommended", 4 | "plugin:react/recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "@typescript-eslint/parser", 11 | "plugins": ["@typescript-eslint"], 12 | "rules": { 13 | "@typescript-eslint/no-var-requires": 0 14 | }, 15 | "settings": { 16 | "react": { 17 | "version": "detect" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getTotalScore(scores: number[]): number { 2 | return scores.reduce((score, count) => score + count); 3 | } 4 | 5 | export function getAvg(scores: number[]): number { 6 | return getTotalScore(scores) / scores.length; 7 | } 8 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/03 hmr/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/03 hmr/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './students'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hot } from 'react-hot-loader/root'; 3 | import { AverageComponent } from './averageComponent'; 4 | import { TotalScoreComponent } from './totalScoreComponent'; 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const App: React.FunctionComponent = () => { 9 | return ( 10 |
11 |

Hello from React DOM

12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default hot(App); 19 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/03 hmr/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["react-hot-loader/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:@typescript-eslint/recommended", 4 | "plugin:react/recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "@typescript-eslint/parser", 11 | "plugins": ["@typescript-eslint"], 12 | "rules": { 13 | "@typescript-eslint/no-var-requires": 0 14 | }, 15 | "settings": { 16 | "react": { 17 | "version": "detect" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/readme-resources/first-time-get-static-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/04 Production Configuration/readme-resources/first-time-get-static-files.png -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/readme-resources/fourth-time-using-gzip-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/04 Production Configuration/readme-resources/fourth-time-using-gzip-files.png -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/readme-resources/second-time-refresh-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/04 Production Configuration/readme-resources/second-time-refresh-page.png -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/readme-resources/third-time-change-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/04 Production Configuration/readme-resources/third-time-change-app.png -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/server/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const expressStaticGzip = require('express-static-gzip'); 3 | const path = require('path'); 4 | 5 | const port = 8081; 6 | const app = express(); 7 | const distPath = path.resolve(__dirname, '../dist'); 8 | 9 | app.use( 10 | expressStaticGzip(distPath, { 11 | maxAge: '1y', 12 | }) 13 | ); 14 | app.listen(port, function() { 15 | console.log('Server running on port ' + port); 16 | }); 17 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getTotalScore(scores: number[]): number { 2 | return scores.reduce((score, count) => score + count); 3 | } 4 | 5 | export function getAvg(scores: number[]): number { 6 | return getTotalScore(scores) / scores.length; 7 | } 8 | 9 | console.log(`We are in: ${process.env.NODE_ENV}`); 10 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/04 Production Configuration/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/04 Production Configuration/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './students'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hot } from 'react-hot-loader/root'; 3 | import { AverageComponent } from './averageComponent'; 4 | import { TotalScoreComponent } from './totalScoreComponent'; 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const App: React.FunctionComponent = () => { 9 | return ( 10 |
11 |

Hello from React DOM

12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default hot(App); 19 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/04 Production Configuration/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["react-hot-loader/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:@typescript-eslint/recommended", 4 | "plugin:react/recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "@typescript-eslint/parser", 11 | "plugins": ["@typescript-eslint"], 12 | "rules": { 13 | "@typescript-eslint/no-var-requires": 0 14 | }, 15 | "settings": { 16 | "react": { 17 | "version": "detect" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/dev.env: -------------------------------------------------------------------------------- 1 | API_BASE=http://localhost:8081/ 2 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/prod.env: -------------------------------------------------------------------------------- 1 | API_BASE=https://myapp.api/ 2 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/readme-resources/first-time-get-static-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/05 dotenv/readme-resources/first-time-get-static-files.png -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/readme-resources/fourth-time-using-gzip-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/05 dotenv/readme-resources/fourth-time-using-gzip-files.png -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/readme-resources/second-time-refresh-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/05 dotenv/readme-resources/second-time-refresh-page.png -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/readme-resources/third-time-change-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/05 dotenv/readme-resources/third-time-change-app.png -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/server/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const expressStaticGzip = require('express-static-gzip'); 3 | const path = require('path'); 4 | 5 | const port = 8081; 6 | const app = express(); 7 | const distPath = path.resolve(__dirname, '../dist'); 8 | 9 | app.use( 10 | expressStaticGzip(distPath, { 11 | maxAge: '1y', 12 | }) 13 | ); 14 | app.listen(port, function() { 15 | console.log('Server running on port ' + port); 16 | }); 17 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getTotalScore(scores: number[]): number { 2 | return scores.reduce((score, count) => score + count); 3 | } 4 | 5 | export function getAvg(scores: number[]): number { 6 | return getTotalScore(scores) / scores.length; 7 | } 8 | 9 | console.log(`We are in: ${process.env.NODE_ENV}`); 10 | console.log(`Api base: ${process.env.API_BASE}`); 11 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/05 dotenv/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/05 dotenv/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './students'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hot } from 'react-hot-loader/root'; 3 | import { AverageComponent } from './averageComponent'; 4 | import { TotalScoreComponent } from './totalScoreComponent'; 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const App: React.FunctionComponent = () => { 9 | return ( 10 |
11 |

Hello from React DOM

12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default hot(App); 19 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/05 dotenv/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["react-hot-loader/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:@typescript-eslint/recommended", 4 | "plugin:react/recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "@typescript-eslint/parser", 11 | "plugins": ["@typescript-eslint"], 12 | "rules": { 13 | "@typescript-eslint/no-var-requires": 0 14 | }, 15 | "settings": { 16 | "react": { 17 | "version": "detect" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/dev.env: -------------------------------------------------------------------------------- 1 | API_BASE=http://localhost:8081/ 2 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/perf.webpack.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const prod = require('./prod.webpack.config.js'); 3 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); 4 | 5 | module.exports = merge(prod, { 6 | plugins: [new BundleAnalyzerPlugin()], 7 | }); 8 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/prod.env: -------------------------------------------------------------------------------- 1 | API_BASE=https://myapp.api/ 2 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/readme-resources/bundleAnalyzer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/06 Bundle Analyzer/readme-resources/bundleAnalyzer.png -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/server/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const expressStaticGzip = require('express-static-gzip'); 3 | const path = require('path'); 4 | 5 | const port = 8081; 6 | const app = express(); 7 | const distPath = path.resolve(__dirname, '../dist'); 8 | 9 | app.use( 10 | expressStaticGzip(distPath, { 11 | maxAge: '1y', 12 | }) 13 | ); 14 | app.listen(port, function() { 15 | console.log('Server running on port ' + port); 16 | }); 17 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getTotalScore(scores: number[]): number { 2 | return scores.reduce((score, count) => score + count); 3 | } 4 | 5 | export function getAvg(scores: number[]): number { 6 | return getTotalScore(scores) / scores.length; 7 | } 8 | 9 | console.log(`We are in: ${process.env.NODE_ENV}`); 10 | console.log(`Api base: ${process.env.API_BASE}`); 11 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/06 Bundle Analyzer/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/06 Bundle Analyzer/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './students'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hot } from 'react-hot-loader/root'; 3 | import { AverageComponent } from './averageComponent'; 4 | import { TotalScoreComponent } from './totalScoreComponent'; 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const App: React.FunctionComponent = () => { 9 | return ( 10 |
11 |

Hello from React DOM

12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default hot(App); 19 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/06 Bundle Analyzer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["react-hot-loader/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:@typescript-eslint/recommended", 4 | "plugin:react/recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "@typescript-eslint/parser", 11 | "plugins": ["@typescript-eslint"], 12 | "rules": { 13 | "@typescript-eslint/no-var-requires": 0 14 | }, 15 | "settings": { 16 | "react": { 17 | "version": "detect" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/dev.env: -------------------------------------------------------------------------------- 1 | API_BASE=http://localhost:8081/ 2 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/perf.webpack.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const prod = require('./prod.webpack.config.js'); 3 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); 4 | 5 | module.exports = merge(prod, { 6 | plugins: [new BundleAnalyzerPlugin()], 7 | }); 8 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/prod.env: -------------------------------------------------------------------------------- 1 | API_BASE=https://myapp.api/ 2 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/readme-resources/webpack_monitor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/07 Webpack Monitor/readme-resources/webpack_monitor.png -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/server/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const expressStaticGzip = require('express-static-gzip'); 3 | const path = require('path'); 4 | 5 | const port = 8081; 6 | const app = express(); 7 | const distPath = path.resolve(__dirname, '../dist'); 8 | 9 | app.use( 10 | expressStaticGzip(distPath, { 11 | maxAge: '1y', 12 | }) 13 | ); 14 | app.listen(port, function() { 15 | console.log('Server running on port ' + port); 16 | }); 17 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getTotalScore(scores: number[]): number { 2 | return scores.reduce((score, count) => score + count); 3 | } 4 | 5 | export function getAvg(scores: number[]): number { 6 | return getTotalScore(scores) / scores.length; 7 | } 8 | 9 | console.log(`We are in: ${process.env.NODE_ENV}`); 10 | console.log(`Api base: ${process.env.API_BASE}`); 11 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/07 Webpack Monitor/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/03 environments/07 Webpack Monitor/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './students'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hot } from 'react-hot-loader/root'; 3 | import { AverageComponent } from './averageComponent'; 4 | import { TotalScoreComponent } from './totalScoreComponent'; 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const App: React.FunctionComponent = () => { 9 | return ( 10 |
11 |

Hello from React DOM

12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default hot(App); 19 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/03 environments/07 Webpack Monitor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/05 Misc/00 Webpack Config Reload/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/05 Misc/00 Webpack Config Reload/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack 4.x by sample 9 | 10 | 11 | 12 | Hello Webpack 4! 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /version 4/05 Misc/00 Webpack Config Reload/students.js: -------------------------------------------------------------------------------- 1 | import { getAvg } from "./averageService"; 2 | 3 | $('body').css('background-color', 'lightSkyBlue'); 4 | 5 | const scores = [90, 75, 60, 99, 94, 30]; 6 | const averageScore = getAvg(scores); 7 | const messageToDisplay = `average score ${averageScore}`; 8 | 9 | document.write(messageToDisplay); 10 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry", 7 | "corejs": "3" 8 | } 9 | ] 10 | ], 11 | "plugins": ["react-hot-loader/babel"] 12 | } 13 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/config/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '..'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/config/test/jest.json: -------------------------------------------------------------------------------- 1 | { 2 | "rootDir": "../../", 3 | "moduleNameMapper": { 4 | "^@/(.*)": "/src/$1" 5 | }, 6 | "preset": "ts-jest", 7 | "restoreMocks": true, 8 | "setupFiles": [ 9 | "/config/test/polyfills.js" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/config/test/polyfills.js: -------------------------------------------------------------------------------- 1 | // Polyfill requestAnimationFrame required by React >=16.0.0 2 | require('raf/polyfill'); 3 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const App: React.StatelessComponent = (props) => ( 4 |
5 | {props.children} 6 |
7 | ); 8 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/appProvider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { hot } from 'react-hot-loader'; 3 | import { Provider } from 'react-redux'; 4 | import { store } from './store'; 5 | import { AppRouter } from './appRouter'; 6 | 7 | const AppProvider: React.StatelessComponent = (props) => ( 8 | 9 | 10 | 11 | ); 12 | 13 | export default hot(module)(AppProvider); 14 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/appRouter.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Router } from 'react-router'; 3 | import { history } from './history'; 4 | import { Routes } from './routes'; 5 | 6 | export const AppRouter: React.StatelessComponent = () => ( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | type?: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => ( 10 | 17 | ); 18 | 19 | Button.defaultProps = { 20 | type: 'submit', 21 | }; 22 | 23 | const onClick = (props: Props) => (e: React.MouseEvent) => { 24 | e.preventDefault(); 25 | props.onClick(); 26 | }; 27 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './button'; 2 | export * from './input'; 3 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/common/components/panel/components/body.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const Body: React.StatelessComponent = (props) => ( 4 |
    5 |
  • 6 | {props.children} 7 |
    • 8 |
9 | ); 10 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/common/components/panel/components/header.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | title: string; 5 | } 6 | 7 | export const Header = (props: Props) => ( 8 |
9 |

{props.title}

10 |
11 | ); 12 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/common/components/panel/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './body'; 2 | export * from './header'; 3 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/common/components/panel/index.ts: -------------------------------------------------------------------------------- 1 | export * from './panel'; 2 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/common/components/panel/panel.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Body, Header } from './components'; 3 | 4 | interface Props { 5 | title: string; 6 | } 7 | 8 | export const Panel: React.StatelessComponent = (props) => ( 9 |
10 |
11 | 12 | {props.children} 13 | 14 |
15 | ); 16 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/common/constants/routes/index.ts: -------------------------------------------------------------------------------- 1 | export const routes = { 2 | default: '/', 3 | members: '/members', 4 | }; 5 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/history.ts: -------------------------------------------------------------------------------- 1 | import { createHashHistory } from 'history'; 2 | 3 | export const history = createHashHistory(); 4 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Jest testing by sample 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import AppProvider from './appProvider'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/index.ts: -------------------------------------------------------------------------------- 1 | export * from './login'; 2 | export * from './members'; 3 | export * from './reducers'; 4 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/login/components/formProps.ts: -------------------------------------------------------------------------------- 1 | import { LoginEntity, LoginFormErrors } from '@/pages/login/viewModel'; 2 | 3 | export interface FormProps { 4 | loginEntity: LoginEntity; 5 | loginFormErrors: LoginFormErrors; 6 | updateField: (field: string, value: any) => void; 7 | doLogin: () => void; 8 | } 9 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/login/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './form'; 2 | export * from './formProps'; 3 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/login/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/login/mappers.ts: -------------------------------------------------------------------------------- 1 | import * as model from '@/rest-api/model'; 2 | import * as vm from './viewModel'; 3 | 4 | export const mapLoginEntityVMToModel = (loginEntity: vm.LoginEntity): model.LoginEntity => ( 5 | Boolean(loginEntity) ? 6 | { 7 | ...loginEntity, 8 | } : 9 | null 10 | ); 11 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/login/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Panel } from '@/common/components/panel'; 3 | import { Form, FormProps } from './components'; 4 | 5 | export const LoginPage: React.StatelessComponent = (props) => ( 6 | 7 |
10 | 11 | ); 12 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/login/validations.ts: -------------------------------------------------------------------------------- 1 | import { createFormValidation, ValidationConstraints, Validators } from 'lc-form-validation'; 2 | 3 | const validationConstraints: ValidationConstraints = { 4 | fields: { 5 | login: [ 6 | { validator: Validators.required }, 7 | ], 8 | password: [ 9 | { validator: Validators.required }, 10 | ], 11 | }, 12 | }; 13 | 14 | export const validations = createFormValidation(validationConstraints); 15 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/login/viewModel.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface LoginEntity { 4 | login: string; 5 | password: string; 6 | } 7 | 8 | export const createEmptyLoginEntity = (): LoginEntity => ({ 9 | login: '', 10 | password: '', 11 | }); 12 | 13 | export interface LoginFormErrors { 14 | login: FieldValidationResult; 15 | password: FieldValidationResult; 16 | } 17 | 18 | export const createEmptyLoginFormErrors = (): LoginFormErrors => ({ 19 | login: new FieldValidationResult(), 20 | password: new FieldValidationResult(), 21 | }); 22 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './list'; 2 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/components/body.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Member } from '../viewModel'; 3 | import { Row } from './row'; 4 | 5 | interface Props { 6 | members: Member[]; 7 | } 8 | 9 | export const Body: React.StatelessComponent = (props) => ( 10 | 11 | { 12 | props.members.map((member) => ( 13 | 17 | )) 18 | } 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/components/header.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const Header: React.StatelessComponent = (props) => ( 4 | 5 | 6 | 7 | Avatar 8 | 9 | 10 | Id 11 | 12 | 13 | Name 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './table'; 2 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/components/row.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Member } from '../viewModel'; 3 | 4 | interface Props { 5 | member: Member; 6 | } 7 | 8 | export const Row: React.StatelessComponent = (props) => ( 9 | 10 | 11 | 12 | 13 | 14 | {props.member.id} 15 | 16 | 17 | {props.member.name} 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/components/table.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Member } from '../viewModel'; 3 | import { Header } from './header'; 4 | import { Body } from './body'; 5 | 6 | interface Props { 7 | members: Member[]; 8 | } 9 | 10 | export const Table: React.StatelessComponent = (props) => ( 11 | 12 |
13 | 14 |
15 | ); 16 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/mappers.ts: -------------------------------------------------------------------------------- 1 | import * as model from '@/rest-api/model'; 2 | import * as vm from './viewModel'; 3 | 4 | export const mapMemberListModelToVM = (members: model.Member[]): vm.Member[] => ( 5 | Array.isArray(members) ? 6 | members.map(mapMemberModelToVM) : 7 | [] 8 | ); 9 | 10 | const mapMemberModelToVM = (member: model.Member): vm.Member => ({ 11 | id: member.id, 12 | name: member.login, 13 | avatarUrl: member.avatar_url, 14 | }); 15 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Member } from './viewModel'; 3 | import { Table } from './components'; 4 | 5 | interface Props { 6 | members: Member[]; 7 | } 8 | 9 | export const MemberListPage: React.StatelessComponent = (props) => ( 10 | <> 11 |

Members

12 | 15 | 16 | ); 17 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/members/list/viewModel.ts: -------------------------------------------------------------------------------- 1 | export interface Member { 2 | id: number; 3 | name: string; 4 | avatarUrl: string; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/pages/reducers.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | 3 | export interface State { 4 | 5 | } 6 | 7 | export const reducers = combineReducers({ 8 | 9 | }); 10 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/rest-api/api/login.ts: -------------------------------------------------------------------------------- 1 | import { LoginEntity } from '../model'; 2 | 3 | export const login = (loginEntity: LoginEntity): Promise => ( 4 | isValidLogin(loginEntity) ? 5 | Promise.resolve() : 6 | Promise.reject('Not valid login or password') 7 | ); 8 | 9 | const isValidLogin = (loginEntity: LoginEntity) => ( 10 | loginEntity.login === 'admin' && 11 | loginEntity.password === 'test' 12 | ); 13 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/rest-api/api/member.ts: -------------------------------------------------------------------------------- 1 | import { Member } from '../model/member'; 2 | 3 | const baseUrl = 'https://api.github.com/orgs/lemoncode/members'; 4 | 5 | export const fetchMembers = (): Promise => ( 6 | fetch(baseUrl) 7 | .then(extractPayload) 8 | ); 9 | 10 | const extractPayload = (response: Response): Promise => ( 11 | response.ok ? 12 | response.json() : 13 | responseError(response) 14 | ); 15 | 16 | const responseError = (response: Response): Promise => ( 17 | response.json() 18 | .then((error) => ( 19 | Promise.reject(error.message) 20 | )) 21 | ); 22 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/rest-api/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './loginEntity'; 2 | export * from './member'; 3 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/rest-api/model/loginEntity.ts: -------------------------------------------------------------------------------- 1 | export interface LoginEntity { 2 | login: string; 3 | password: string; 4 | } 5 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/rest-api/model/member.ts: -------------------------------------------------------------------------------- 1 | export interface Member { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/routes.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Route, Switch } from 'react-router'; 3 | import { routes } from './common/constants/routes'; 4 | import { App } from './app'; 5 | import { LoginPageContainer, MemberListPageContainer } from './pages'; 6 | 7 | export const Routes = () => ( 8 | 9 | 10 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/src/store.ts: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware, compose } from 'redux'; 2 | import reduxThunk from 'redux-thunk'; 3 | import { reducers } from './pages'; 4 | 5 | const nonTypedWindow: any = window; 6 | const composeEnhancers = nonTypedWindow.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 7 | 8 | export const store = createStore( 9 | reducers, 10 | composeEnhancers(applyMiddleware(reduxThunk)) 11 | ); 12 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Resolve alias/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "allowJs": true, 12 | "suppressImplicitAnyIndexErrors": true, 13 | "skipLibCheck": true, 14 | "esModuleInterop": true, 15 | "baseUrl": ".", 16 | "paths": { 17 | "@/*": ["src/*"], 18 | } 19 | }, 20 | "compileOnSave": true, 21 | "exclude": [ 22 | "node_modules" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Webpack Lazy Loading/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry", 7 | "corejs": "3" 8 | } 9 | ] 10 | ], 11 | "plugins": ["@babel/plugin-syntax-dynamic-import"] 12 | } 13 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Webpack Lazy Loading/averageService.js: -------------------------------------------------------------------------------- 1 | export function getAvg(scores) { 2 | return getTotalScore(scores) / scores.length; 3 | } 4 | 5 | function getTotalScore(scores) { 6 | return scores.reduce((score, count) => score + count); 7 | } 8 | -------------------------------------------------------------------------------- /version 4/05 Misc/07 Webpack Lazy Loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 | Hello Webpack 4! 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["react-hot-loader/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:@typescript-eslint/recommended", 4 | "plugin:react/recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "@typescript-eslint/parser", 11 | "plugins": ["@typescript-eslint"], 12 | "rules": { 13 | "@typescript-eslint/no-var-requires": 0 14 | }, 15 | "settings": { 16 | "react": { 17 | "version": "detect" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/dev.env: -------------------------------------------------------------------------------- 1 | API_BASE=http://localhost:8081/ 2 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/perf.webpack.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const prod = require('./prod.webpack.config.js'); 3 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); 4 | 5 | module.exports = merge(prod, { 6 | plugins: [new BundleAnalyzerPlugin()], 7 | }); 8 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/prod.env: -------------------------------------------------------------------------------- 1 | API_BASE=https://myapp.api/ 2 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/server/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const expressStaticGzip = require('express-static-gzip'); 3 | const path = require('path'); 4 | 5 | const port = 8081; 6 | const app = express(); 7 | const distPath = path.resolve(__dirname, '../dist'); 8 | 9 | app.use( 10 | expressStaticGzip(distPath, { 11 | maxAge: '1y', 12 | }) 13 | ); 14 | app.listen(port, function() { 15 | console.log('Server running on port ' + port); 16 | }); 17 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/averageComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: teal; 2 | $jumbotronBackground: darkseagreen; 3 | 4 | .result-background { 5 | background-color: $background; 6 | } 7 | 8 | :global(.jumbotron).result-background { 9 | background-color: $jumbotronBackground; 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/averageService.ts: -------------------------------------------------------------------------------- 1 | export function getTotalScore(scores: number[]): number { 2 | return scores.reduce((score, count) => score + count); 3 | } 4 | 5 | export function getAvg(scores: number[]): number { 6 | return getTotalScore(scores) / scores.length; 7 | } 8 | 9 | console.log(`We are in: ${process.env.NODE_ENV}`); 10 | console.log(`Api base: ${process.env.API_BASE}`); 11 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/content/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/05 Misc/08 Duplicate Package Checker/src/content/logo_1.png -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/content/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/05 Misc/08 Duplicate Package Checker/src/content/logo_2.png -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack 4.x by sample 8 | 9 | 10 |
11 |
12 | 13 | Hello Webpack 4! 14 | 15 |
16 | RedBackground stuff 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './students'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/mystyles.scss: -------------------------------------------------------------------------------- 1 | $blue-color: teal; 2 | 3 | .red-background { 4 | background-color: $blue-color; 5 | } 6 | 7 | img { 8 | display: block; 9 | width: 200px; 10 | } 11 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/students.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hot } from 'react-hot-loader/root'; 3 | import { AverageComponent } from './averageComponent'; 4 | import { TotalScoreComponent } from './totalScoreComponent'; 5 | 6 | $('body').css('background-color', 'lightSkyBlue'); 7 | 8 | const App: React.FunctionComponent = () => { 9 | return ( 10 |
11 |

Hello from React DOM

12 | 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default hot(App); 19 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/src/totalScoreComponentStyles.scss: -------------------------------------------------------------------------------- 1 | $background: indianred; 2 | 3 | .result-background { 4 | background-color: $background; 5 | } 6 | -------------------------------------------------------------------------------- /version 4/05 Misc/08 Duplicate Package Checker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "esModuleInterop": true 13 | }, 14 | "compileOnSave": false, 15 | "exclude": ["node_modules"] 16 | } 17 | -------------------------------------------------------------------------------- /version 4/99 Readme Resources/00 Intro/BONUS Auto Restart DevServer/commandPrompt_restart.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/99 Readme Resources/00 Intro/BONUS Auto Restart DevServer/commandPrompt_restart.PNG -------------------------------------------------------------------------------- /version 4/99 Readme Resources/00 Intro/BONUS Auto Restart DevServer/commandPrompt_start.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/webpack-by-sample/383d9ceeab857ef254fab14f837f81cf8e164e5b/version 4/99 Readme Resources/00 Intro/BONUS Auto Restart DevServer/commandPrompt_start.PNG --------------------------------------------------------------------------------