🐛 fix some more typos

scottwarren · Feb 5, 2016 · def9f3f · def9f3f
1 parent 256b2ed
commit def9f3f
Show file tree

Hide file tree

Showing 23 changed files with 61 additions and 55 deletions.
diff --git a/part1/README.md b/part1/README.md
@@ -184,7 +184,8 @@ For example in the diagram above I had
 require('./styles.css')
 ```
 
-If I include [the css-loader](https://github.com/webpack/css-loader) in my webpack config, this is not only perfectly valid, but also will actually apply the CSS to my page.
+If I include [the style-loader](https://github.com/webpack/style-loader) and the [the css-loader](https://github.com/webpack/css-loader) in my webpack config, this is not only perfectly
+valid, but also will actually apply the CSS to my page.
 
 This is just a single example of the many loaders you can use with webpack.
 
@@ -352,9 +353,9 @@ MyDirectory
 [Example 4](https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/example4)
 
 Earlier in the tutorial I mentioned [loaders](#loaders). These will help us require non-js files in
-our code. In this case, the only loader we will need is the css loader. First we need to install the loader:
+our code. In this case, we will need the style loader and the css loader. First we need to install the loaders:
 
-    npm install --save-dev css-loader
+    npm install --save-dev style-loader css-loader
 
 Now that it's installed we can tweak our config to include the css loader:
 
@@ -377,7 +378,7 @@ module.exports = {
     }),
     new webpack.optimize.OccurenceOrderPlugin()
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]
@@ -388,7 +389,7 @@ module.exports = {
 
 Going over the new properties one by one:
 
-* [modules](http://webpack.github.io/docs/configuration.html#module) - Options affecting your files
+* [module](http://webpack.github.io/docs/configuration.html#module) - Options affecting your files
   * [loaders](http://webpack.github.io/docs/configuration.html#module-loaders) - An array of loaders that we specify for our application
     * test - A regular expression to match the loader with a file
     * loaders - Which loaders to use for files that match the test
@@ -461,7 +462,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]
@@ -486,7 +487,7 @@ actually populate it.
   <h1>Very Website</h1>
   <section id="color"></section>
   <button id="button">Such Button</button>
-  <script src="bundle.js"></script>
+
 </body>
 </html>
 ```
@@ -541,7 +542,7 @@ var webpack = require('webpack')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  devtool: 'cheap-eval-source-mao',
+  devtool: 'cheap-eval-source-map',
   entry: [
     'webpack-dev-server/client?http://localhost:8080',
     'webpack/hot/dev-server',
@@ -557,7 +558,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]
@@ -585,7 +586,6 @@ Summarized:
 * devServer
   * contentBase: Where to serve files from
   * hot: enable HMR
----
 
 The prod config doesn't change much
 
@@ -613,7 +613,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example1/webpack.config.js b/part1/example1/webpack.config.js
@@ -5,7 +5,7 @@ module.exports = {
   output: {
     filename: 'bundle.js',
   },
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example4/README.md b/part1/example4/README.md
@@ -24,7 +24,7 @@ module.exports = {
     }),
     new webpack.optimize.OccurenceOrderPlugin()
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example4/webpack.config.js b/part1/example4/webpack.config.js
@@ -15,7 +15,7 @@ module.exports = {
     }),
     new webpack.optimize.OccurenceOrderPlugin()
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example5/README.md b/part1/example5/README.md
@@ -34,7 +34,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]
@@ -59,7 +59,7 @@ actually populate it.
   <h1>Very Website</h1>
   <section id="color"></section>
   <button id="button">Such Button</button>
-  <script src="bundle.js"></script>
+
 </body>
 </html>
 ```

diff --git a/part1/example5/src/index.html b/part1/example5/src/index.html
@@ -6,6 +6,6 @@
   <h1>Very Website</h1>
   <section id="color"></section>
   <button id="button">Such Button</button>
-  <script src="bundle.js"></script>
+
 </body>
 </html>
diff --git a/part1/example5/webpack.config.js b/part1/example5/webpack.config.js
@@ -19,7 +19,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example6/README.md b/part1/example6/README.md
@@ -21,7 +21,7 @@ var webpack = require('webpack')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  devtool: 'cheap-eval-source-mao',
+  devtool: 'cheap-eval-source-map',
   entry: [
     'webpack-dev-server/client?http://localhost:8080',
     'webpack/hot/dev-server',
@@ -37,7 +37,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]
@@ -93,7 +93,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example6/src/index.html b/part1/example6/src/index.html
@@ -6,6 +6,6 @@
   <h1>Very Website</h1>
   <section id="color"></section>
   <button id="button">Such Button</button>
-  <script src="bundle.js"></script>
+
 </body>
 </html>
diff --git a/part1/example6/webpack.config.dev.js b/part1/example6/webpack.config.dev.js
@@ -3,7 +3,7 @@ var webpack = require('webpack')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  devtool: 'cheap-eval-source-mao',
+  devtool: 'cheap-eval-source-map',
   entry: [
     'webpack-dev-server/client?http://localhost:8080',
     'webpack/hot/dev-server',
@@ -19,7 +19,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example6/webpack.config.prod.js b/part1/example6/webpack.config.prod.js
@@ -20,7 +20,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example7/package.json b/part1/example7/package.json
@@ -11,8 +11,13 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "css-loader": "^0.23.1",
     "html-webpack-plugin": "^2.8.1",
+    "style-loader": "^0.13.0",
     "webpack": "^1.12.13",
     "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "pleasejs": "^0.4.2"
   }
 }
diff --git a/part1/example7/src/changeColor.js b/part1/example7/src/changeColor.js
@@ -0,0 +1,10 @@
+var Please = require('pleasejs')
+var div = document.getElementById('color')
+var button = document.getElementById('button')
+
+function changeColor() {
+  div.style.backgroundColor = Please.make_color()
+  console.log('pls do work')
+}
+
+button.addEventListener('click', changeColor)
diff --git a/part1/example7/src/index.html b/part1/example7/src/index.html
@@ -5,7 +5,6 @@
 <body>
   <h1>Very Website</h1>
   <section id="color"></section>
-  <button id="button">Such Button</button>
-  <script src="bundle.js"></script>
+  <button id="button">Such Button</button>  
 </body>
 </html>
diff --git a/part1/example7/src/index.js b/part1/example7/src/index.js
@@ -1,10 +1,2 @@
-require('./styles.css') // The page is now styled
-var Please = require('pleasejs')
-var div = document.getElementById('color')
-var button = document.getElementById('button')
-
-function changeColor() {
-  div.style.color = Please.make_color()
-}
-
-button.addEventListener('click', changeColor)
+require('./styles.css')
+require('./changeColor.js')
diff --git a/part1/example7/src/styles.css b/part1/example7/src/styles.css
@@ -1,5 +1,6 @@
 h1 {
   color: rgb(114, 191, 190);
+  text-align: center;
 }
 
 #color {
@@ -10,11 +11,9 @@ h1 {
 
 button {
   cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  background-color: rgb(123, 109, 198);
-  color: rgb(255, 255, 255);
-  padding: 10px 5px;
-  border-radius: 4px;
-  border-bottom: 2px solid rgb(143, 132, 200);
+  display: block;
+  width: 100px;
+  outline: 0;
+  border: 0;
+  margin: 20px auto;
 }
diff --git a/part1/example7/webpack.config.dev.js b/part1/example7/webpack.config.dev.js
@@ -3,10 +3,10 @@ var webpack = require('webpack')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  devtool: 'cheap-eval-source-mao',
+  devtool: 'cheap-eval-source-map',
   entry: [
     'webpack-dev-server/client?http://localhost:8080',
-    'webpack/hot/dev-server',
+    'webpack/hot/only-dev-server',
     './src/index'
   ],
   output: {
@@ -19,7 +19,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/example7/webpack.config.prod.js b/part1/example7/webpack.config.prod.js
@@ -20,7 +20,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/extra/README.md b/part1/extra/README.md
@@ -28,7 +28,7 @@ var webpack = require('webpack')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  devtool: 'cheap-eval-source-mao',
+  devtool: 'cheap-eval-source-map',
   entry: [
     'webpack-dev-server/client?http://localhost:8080',
     'webpack/hot/dev-server',
@@ -44,7 +44,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]
@@ -111,7 +111,7 @@ module.exports = {
       process.env.NODE_ENV: JSON.stringify('production')
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/extra/package.json b/part1/extra/package.json
@@ -12,6 +12,7 @@
   "license": "MIT",
   "devDependencies": {
     "html-webpack-plugin": "^2.8.1",
+    "raw-loader": "^0.5.1",
     "webpack": "^1.12.13",
     "webpack-dev-server": "^1.14.1"
   }

diff --git a/part1/extra/src/index.html b/part1/extra/src/index.html
@@ -6,6 +6,6 @@
   <h1>Very Website</h1>
   <section id="color"></section>
   <button>Such Button</button>
-  <script src="bundle.js"></script>
+
 </body>
 </html>
diff --git a/part1/extra/webpack.config.dev.js b/part1/extra/webpack.config.dev.js
@@ -3,7 +3,7 @@ var webpack = require('webpack')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  devtool: 'cheap-eval-source-mao',
+  devtool: 'cheap-eval-source-map',
   entry: [
     'webpack-dev-server/client?http://localhost:8080',
     'webpack/hot/dev-server',
@@ -19,7 +19,7 @@ module.exports = {
       template: './src/index.html'
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]

diff --git a/part1/extra/webpack.config.prod.js b/part1/extra/webpack.config.prod.js
@@ -23,7 +23,7 @@ module.exports = {
       process.env.NODE_ENV: JSON.stringify('production')
     })
   ],
-  modules: {
+  module: {
     loaders: [{
       test: /\.css$/,
       loaders: ["style", "css"]