Getting started with webpack

shama · shama · commit 8a1ec34b0789 · 2015-07-07T07:44:27.000-07:00
diff --git a/getting-started-with-webpack/README.md b/getting-started-with-webpack/README.md
@@ -0,0 +1,10 @@
+# Getting Started with webpack
+
+> [https://www.youtube.com/watch?v=TaWKUpahFZM](https://www.youtube.com/watch?v=TaWKUpahFZM)
+
+Install [io.js](https://iojs.org/en/index.html).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to build as you edit files while viewing `http://localhost:8080`
diff --git a/getting-started-with-webpack/base.css b/getting-started-with-webpack/base.css
@@ -0,0 +1,3 @@
+body {
+  background-color: green;
+}
diff --git a/getting-started-with-webpack/bear.css b/getting-started-with-webpack/bear.css
@@ -0,0 +1,5 @@
+@import 'base.css';
+
+div {
+  color: red;
+}
diff --git a/getting-started-with-webpack/bear.js b/getting-started-with-webpack/bear.js
@@ -0,0 +1,5 @@
+var $ = require('jquery')
+
+require('./bear.css')
+
+module.exports = $('<div/>').html('grizzly growl!')
diff --git a/getting-started-with-webpack/index.html b/getting-started-with-webpack/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <script src="bundle.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/getting-started-with-webpack/index.js b/getting-started-with-webpack/index.js
@@ -0,0 +1,3 @@
+require(['./bear.js'], function (bear) {
+  document.body.appendChild(bear[0])
+})
diff --git a/getting-started-with-webpack/package.json b/getting-started-with-webpack/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "getting-started-with-webpack",
+  "version": "0.1.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server ./index.js"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "css-loader": "^0.15.1",
+    "style-loader": "^0.12.3",
+    "webpack": "^1.10.1",
+    "webpack-dev-server": "^1.10.1"
+  },
+  "dependencies": {
+    "css-loader": "~0.15.1",
+    "jquery": "^2.1.4",
+    "node-libs-browser": "~0.5.2",
+    "style-loader": "~0.12.3",
+    "webpack": "~1.10.1",
+    "webpack-dev-server": "~1.10.1"
+  },
+  "description": ""
+}
diff --git a/getting-started-with-webpack/webpack.config.js b/getting-started-with-webpack/webpack.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  entry: './index.js',
+  output: {
+    path: __dirname,
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [
+      { test: /\.css$/, loader: 'style!css!' }
+    ]
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body {`
	`2`	`+ background-color: green;`
	`3`	`+}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +@import 'base.css';
++
 +div {
 +  color: red;
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+require(['./bear.js'], function (bear) {`
	`2`	`+ document.body.appendChild(bear[0])`
	`3`	`+})`