Lemoncode · nasdan · Mar 21, 2017 · Mar 21, 2017 · nasdan · Mar 21, 2017
diff --git a/03 Misc/05 Commons Chunk Plugin/README.md b/03 Misc/05 Commons Chunk Plugin/README.md
@@ -0,0 +1,3 @@
+# 00 TypeScript
+
+TBD
diff --git a/03 Misc/05 Commons Chunk Plugin/package.json b/03 Misc/05 Commons Chunk Plugin/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "boilerplate",
+  "version": "1.0.0",
+  "description": "Front-End Lemoncode Master, Bundle Modules, Webpack Demo 00 Boilerplate",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lemoncode/webpack-2.x-by-sample.git"
+  },
+  "author": "Lemoncode",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Lemoncode/webpack-2.x-by-sample/issues"
+  },
+  "homepage": "https://github.com/Lemoncode/webpack-2.x-by-sample#readme",
+  "devDependencies": {
+    "@types/jquery": "^2.0.40",
+    "@types/left-pad": "^1.1.0",
+    "awesome-typescript-loader": "^3.1.2",
+    "css-loader": "^0.26.2",
+    "extract-text-webpack-plugin": "^2.0.0",
+    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.28.0",
+    "left-pad": "^1.1.3",
+    "node-sass": "^4.5.0",
+    "sass-loader": "^6.0.2",
+    "style-loader": "^0.13.2",
+    "typescript": "^2.2.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "jquery": "^3.1.1"
+  }
+}
diff --git a/03 Misc/05 Commons Chunk Plugin/src/averageService.ts b/03 Misc/05 Commons Chunk Plugin/src/averageService.ts
@@ -0,0 +1,9 @@
+export function getAvg(scores): number {
+ return getTotalScore(scores) / scores.length;
+}
+
+function getTotalScore(scores): number {
+  return scores.reduce((score, count) => {
+    return score + count;
+  });
+}
diff --git a/03 Misc/05 Commons Chunk Plugin/src/index.html b/03 Misc/05 Commons Chunk Plugin/src/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Webpack 2.x by sample</title>
+  </head>
+  <body>
+    <div class="jumbotron">
+      <h1>Testing Bootstrap</h1>
+      <p>
+        Bootstrap is the most popular ...
+      </p>
+    </div>
+    Hello Webpack 2!
+    <div class="red-background ">
+      RedBackground stuff
+    </div>
+  </body>
+</html>
diff --git a/03 Misc/05 Commons Chunk Plugin/src/mystyles.scss b/03 Misc/05 Commons Chunk Plugin/src/mystyles.scss
@@ -0,0 +1,5 @@
+$blue-color: teal;
+
+.red-background {
+ background-color: $blue-color;
+}
diff --git a/03 Misc/05 Commons Chunk Plugin/src/students.ts b/03 Misc/05 Commons Chunk Plugin/src/students.ts
@@ -0,0 +1,12 @@
+import {getAvg} from "./averageService";
+import * as $ from 'jquery';
+import leftPad = require('left-pad');
+
+$('body').css('background-color', 'lightSkyBlue');
+
+const scores: number[] = [90, 75, 60, 99, 94, 30];
+const averageScore: number = getAvg(scores);
+
+const messageToDisplay: string = leftPad(`average score ${averageScore}`, 35, 'jorobateflanders');
+
+document.write(messageToDisplay);
diff --git a/03 Misc/05 Commons Chunk Plugin/src/vendor.ts b/03 Misc/05 Commons Chunk Plugin/src/vendor.ts
@@ -0,0 +1,2 @@
+import 'jquery';
+import 'left-pad';
diff --git a/03 Misc/05 Commons Chunk Plugin/tsconfig.json b/03 Misc/05 Commons Chunk Plugin/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": false,
+    "noImplicitAny": false,
+    "sourceMap": true,
+    "noLib": false,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "compileOnSave": false,
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/03 Misc/05 Commons Chunk Plugin/webpack.config.js b/03 Misc/05 Commons Chunk Plugin/webpack.config.js
@@ -0,0 +1,100 @@
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+var basePath = __dirname;
+
+module.exports = {
+  context: path.join(basePath, 'src'),
+  resolve: {
+    extensions: ['.js', '.ts']
+  },
+  entry: {
+    app: './students.ts',
+    appStyles: [
+      './mystyles.scss',
+    ],
+    vendor: './vendor.ts',
+    vendorStyles: [
+      '../node_modules/bootstrap/dist/css/bootstrap.css',
+    ],
+  },
+  output: {
+    path: path.join(basePath, 'dist'),
+    filename: '[chunkhash].[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        loader: 'awesome-typescript-loader',
+      },
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            { loader: 'css-loader', },
+            { loader: 'sass-loader', },
+          ],
+        }),
+      },
+      {
+        test: /\.css$/,
+        include: /node_modules/,
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: {
+            loader: 'css-loader',
+          },
+        }),
+      },
+      // Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
+      // Using here url-loader and file-loader
+      {
+        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+      },
+      {
+        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
+      },
+      {
+        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader'
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
+      },
+    ],
+  },
+  // For development https://webpack.js.org/configuration/devtool/#for-development
+  devtool: 'source-map',
+  devServer: {
+    port: 8080,
+  },
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor'
+    }),
+    //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html', //Name of file in ./dist/
+      template: 'index.html', //Name of template in ./src
+			hash: true,
+    }),
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery"
+    }),
+    new ExtractTextPlugin({
+      filename: '[chunkhash].[name].css',
+      disable: false,
+      allChunks: true,
+    }),
+  ],
+};
diff --git a/03 Misc/05 Production Configuration/.babelrc → 03 Misc/06 Production Configuration/.babelrc b/03 Misc/05 Production Configuration/.babelrc → 03 Misc/06 Production Configuration/.babelrc
diff --git a/...isc/05 Production Configuration/README.md → ...isc/06 Production Configuration/README.md b/...isc/05 Production Configuration/README.md → ...isc/06 Production Configuration/README.md
@@ -1,4 +1,4 @@
-# 05 Production Configuration
+# 06 Production Configuration
 
 In this demo we are going to create different builds for each environment.
 We will learn how to configure it and how to reduce bundle file sizes.

diff --git a/...tion Configuration/base.webpack.config.js → ...tion Configuration/base.webpack.config.js b/...tion Configuration/base.webpack.config.js → ...tion Configuration/base.webpack.config.js
diff --git a/...ction Configuration/dev.webpack.config.js → ...ction Configuration/dev.webpack.config.js b/...ction Configuration/dev.webpack.config.js → ...ction Configuration/dev.webpack.config.js
diff --git a/.../05 Production Configuration/package.json → .../06 Production Configuration/package.json b/.../05 Production Configuration/package.json → .../06 Production Configuration/package.json
diff --git a/...tion Configuration/prod.webpack.config.js → ...tion Configuration/prod.webpack.config.js b/...tion Configuration/prod.webpack.config.js → ...tion Configuration/prod.webpack.config.js
diff --git a/...on Configuration/src/averageComponent.jsx → ...on Configuration/src/averageComponent.jsx b/...on Configuration/src/averageComponent.jsx → ...on Configuration/src/averageComponent.jsx
diff --git a/...iguration/src/averageComponentStyles.scss → ...iguration/src/averageComponentStyles.scss b/...iguration/src/averageComponentStyles.scss → ...iguration/src/averageComponentStyles.scss
diff --git a/...ction Configuration/src/averageService.js → ...ction Configuration/src/averageService.js b/...ction Configuration/src/averageService.js → ...ction Configuration/src/averageService.js
diff --git a/...5 Production Configuration/src/index.html → ...6 Production Configuration/src/index.html b/...5 Production Configuration/src/index.html → ...6 Production Configuration/src/index.html
diff --git a/...Production Configuration/src/students.jsx → ...Production Configuration/src/students.jsx b/...Production Configuration/src/students.jsx → ...Production Configuration/src/students.jsx
diff --git a/...Configuration/src/totalScoreComponent.jsx → ...Configuration/src/totalScoreComponent.jsx b/...Configuration/src/totalScoreComponent.jsx → ...Configuration/src/totalScoreComponent.jsx
diff --git a/...ration/src/totalScoreComponentStyles.scss → ...ration/src/totalScoreComponentStyles.scss b/...ration/src/totalScoreComponentStyles.scss → ...ration/src/totalScoreComponentStyles.scss
diff --git a/README.md b/README.md
@@ -260,7 +260,21 @@ Summary steps:
 - Create other component and scss file with same class name.
 - Create selector using custom class and Bootstrap class.
 
-### 05 Production Configuration
+### 05 Commons Chunk Plugin
+
+In this demo we will learn how to split our application in different bundles and how does Webpack manage to do so with the CommonsChunkPlugin.
+We will also learn some tips and tricks.
+
+We will start from sample _02 Fx/00 TypeScript_.
+
+Summary steps:
+- Comment out the CommonsChunkPlugin to analyze what happens.
+- Add it back and see the changes.
+- Add a new third party library and see how the inline vendor grows.
+- create a vendor file as an alternative to inline vendor in the config.
+- move all the vendors imports there.
+
+### 06 Production Configuration
 
 In this demo we are going to create different builds for each environment.
 We will learn how to configure it and how to reduce bundle file sizes.