Added notes for Webpack, created Webpack config, and modified existing

kevinjdonohue · kevinjdonohue · commit 64d63065326b · 2017-06-20T21:25:22.000-07:00
configuration to use Webpack
diff --git a/README.md b/README.md
@@ -329,8 +329,6 @@ Change "prestart" script to use babel-node
 
 `babel-node buildScripts/startMessage.js`
 
-
-
 ## Module #7:  Bundling
 
 #### Why use bundling?
@@ -341,7 +339,7 @@ Change "prestart" script to use babel-node
 
 #### Module Formats
 
-- Old Module Formats
+- *Old Module Formats*
 
   - ##### IIFE (Immediately Invoked Function Expressions)
 
@@ -365,7 +363,7 @@ Change "prestart" script to use babel-node
 
 #### Selecting a Bundler
 
-- OLD Bundler
+- *OLD Bundler*
 
   - ##### Require.JS
 
@@ -413,7 +411,42 @@ Change "prestart" script to use babel-node
 - Webpack 2 soon --> tree shaking coming
 
 
+##### Using Webpack
+
+1. Create a couple of basic files to use with Webpack, `index.js` and `index.css` in the src folder
+   1. In index.js we do the following 
+      1. use a Node package called numeral
+      2. import our `index.css` file
+2. Create a basic Webpack configuration file in the project root called `webpack.config.dev.js` (see project for contents)
+   1. Within the configuration, we output our bundled JavaScript in a single file called `bundle.js`
+3. Update Express webserver (srcServer.js) to use Webpack:
+
+```javascript
+import webpack from 'webpack';
+import config from '.../webpack.config.dev'
+
+...
+
+const compiler = webpack(config);
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}));
+
+...
+```
+3. Update index.html to reference `bundle.js` generated by Webpack
+
+4. Note in browser when the application is run, bundle.js shows as the JavaScript file included by the page.  In addition, because Webpack is configured to include our stylesheet, we find the css styles we defined in index.css embedded in the bundle.js file.
+
+
+#### Sourcemaps
+
+
+
+
 
 ## Bibliography
 
-The Checklist Manifesto by Atul Gawande
+The Checklist Manifesto by Atul Gawande
diff --git a/buildScripts/srcServer.js b/buildScripts/srcServer.js
@@ -1,8 +1,17 @@
 import express from 'express';
 import path from 'path';
 import open from 'open';
+import webpack from 'webpack';
+
+import config from '../webpack.config.dev'
 
 const app = express();
+const compiler = webpack(config);
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}))
 
 app.get('/', function(req, res) {
     res.sendFile(path.join(__dirname, '../src/index.html'));
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,7 @@
+body {
+  font-family: sans-serif;
+}
+
+table th {
+  padding: 5px;
+}
diff --git a/src/index.html b/src/index.html
@@ -5,5 +5,6 @@
     </head>
     <body>
       <h1>Hello World!!!</h1>
+      <script src="bundle.js"></script>
     </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,6 @@
+import './index.css';
+import numeral from 'numeral';
+
+const courseValue = numeral(1000).format('$0,0.00');
+
+console.log(`I would pay ${courseValue} for this awesome course!`);
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -0,0 +1,23 @@
+import path from 'path';
+
+export default {
+  debug: true,
+  devtool: 'inline-source-map',
+  noInfo: false,
+  entry: [
+    path.resolve(__dirname, 'src/index')
+  ],
+  target: 'web',
+  output: {
+    path: path.resolve(__dirname, 'src'),
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  plugins: [],
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
+      { test: /\.css$/, loaders: ['style', 'css'] }
+    ]
+  }
+}
