added css loader and html plugin to webpack

ZuehlkeEnterpriseJS · Nov 10, 2016 · 8e72cd9 · 8e72cd9
1 parent bf5a958
commit 8e72cd9
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-bundle.js
+bundle.js
+dist
diff --git a/4-modularization-webpack-loaders/Readme.md b/4-modularization-webpack-loaders/Readme.md
@@ -1,5 +1,5 @@
-# Lesson: Transpiling with webpack
-## Todo
+# Lesson: Webpack Loaders
+## Transpiling ES6 to ES5
 1. Install babel-loader as dev dependency
 1. Create webpack config and add babel-loader
 1. Adjust npm script "build"

diff --git a/5-final/index.html b/5-final/index.html
@@ -3,13 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <title>TodoApp</title>
-    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-
     <div id="todo-app" class="container"></div>
-
-    <script src="bundle.js"></script>
 </body>
 </html>
diff --git a/5-final/package.json b/5-final/package.json
@@ -16,6 +16,10 @@
     "babel-core": "^6.18.2",
     "babel-loader": "^6.2.7",
     "babel-preset-es2015": "^6.18.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.24.1",
+    "style-loader": "^0.13.1",
     "webpack": "^2.1.0-beta.25"
   }
 }
diff --git a/5-final/src/app.js b/5-final/src/app.js
@@ -1,3 +1,5 @@
+import '../styles.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import { TodoStore } from './todo-store';
 import { todoElement } from './todo-element';
 

diff --git a/5-final/webpack.config.js b/5-final/webpack.config.js
@@ -1,17 +1,21 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 const config = {
   entry: './src/app.js',
   output: {
     filename: 'bundle.js',
+    path: './dist'
   },
   module: {
     loaders: [
-      {
-        test: /\.js$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: 'babel?presets[]=es2015'
-      }
+      { test: /\.js$/, loader: 'babel?presets[]=es2015' },
+      { test: /\.css$/, loader: "style-loader!css-loader" },
+      { test: /.jpe?g$|.gif$|.png$|.svg$|.woff$|.woff2$|.ttf$|.eot$/, loader: "file" }
     ]
-  }
+  },
+  plugins: [
+    new HtmlWebpackPlugin({template: './index.html'})
+  ]
 };
 
 module.exports = config;
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,7 @@
+# Modern JavaScript Workflow Example App
+
+## Steps
+
+### 1. Dependency
+Working app without any dependency or tooling. Add bootstrap as dependency here.
+