From def9f3ff17e4571fc5a35e25089ec2f1d93321b9 Mon Sep 17 00:00:00 2001 From: AriaFallah Date: Fri, 5 Feb 2016 16:48:01 -0500 Subject: [PATCH] :bug: fix some more typos --- part1/README.md | 22 +++++++++++----------- part1/example1/webpack.config.js | 2 +- part1/example4/README.md | 2 +- part1/example4/webpack.config.js | 2 +- part1/example5/README.md | 4 ++-- part1/example5/src/index.html | 2 +- part1/example5/webpack.config.js | 2 +- part1/example6/README.md | 6 +++--- part1/example6/src/index.html | 2 +- part1/example6/webpack.config.dev.js | 4 ++-- part1/example6/webpack.config.prod.js | 2 +- part1/example7/package.json | 5 +++++ part1/example7/src/changeColor.js | 10 ++++++++++ part1/example7/src/index.html | 3 +-- part1/example7/src/index.js | 12 ++---------- part1/example7/src/styles.css | 13 ++++++------- part1/example7/webpack.config.dev.js | 6 +++--- part1/example7/webpack.config.prod.js | 2 +- part1/extra/README.md | 6 +++--- part1/extra/package.json | 1 + part1/extra/src/index.html | 2 +- part1/extra/webpack.config.dev.js | 4 ++-- part1/extra/webpack.config.prod.js | 2 +- 23 files changed, 61 insertions(+), 55 deletions(-) create mode 100644 part1/example7/src/changeColor.js diff --git a/part1/README.md b/part1/README.md index 0abb221..4135922 100644 --- 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.

Very Website

- + ``` @@ -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 index 03f8e98..7965bdb 100644 --- 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 index 4b5e8f6..e9f7934 100644 --- 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 index f2b38ed..89a68c7 100644 --- 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 index 9b72c15..70a5029 100644 --- 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.

Very Website

- + ``` diff --git a/part1/example5/src/index.html b/part1/example5/src/index.html index ff9d9a8..7b4b480 100644 --- a/part1/example5/src/index.html +++ b/part1/example5/src/index.html @@ -6,6 +6,6 @@

Very Website

- + diff --git a/part1/example5/webpack.config.js b/part1/example5/webpack.config.js index f49f25c..91cf38a 100644 --- 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 index 27b7131..490e1f7 100644 --- 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 index ff9d9a8..7b4b480 100644 --- a/part1/example6/src/index.html +++ b/part1/example6/src/index.html @@ -6,6 +6,6 @@

Very Website

- + diff --git a/part1/example6/webpack.config.dev.js b/part1/example6/webpack.config.dev.js index 4b23fb8..2b4baec 100644 --- 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 index d620585..da4f773 100644 --- 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 index b6c601a..60b886a 100644 --- 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 new file mode 100644 index 0000000..021d194 --- /dev/null +++ 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 index ff9d9a8..55fff75 100644 --- a/part1/example7/src/index.html +++ b/part1/example7/src/index.html @@ -5,7 +5,6 @@

Very Website

- - + diff --git a/part1/example7/src/index.js b/part1/example7/src/index.js index 2f0521b..9daf7cf 100644 --- 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 index dbb6325..1982ab4 100644 --- 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 index 4b23fb8..9438302 100644 --- 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 index d620585..da4f773 100644 --- 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 index b7abc08..a42c9ba 100644 --- 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 index a8d12b8..d3a8e6b 100644 --- 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 index 7a0c5bd..a13b4f1 100644 --- a/part1/extra/src/index.html +++ b/part1/extra/src/index.html @@ -6,6 +6,6 @@

Very Website

- + diff --git a/part1/extra/webpack.config.dev.js b/part1/extra/webpack.config.dev.js index 5d3d9bf..589b417 100644 --- 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 index 42b45ee..ca14f0a 100644 --- 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"]