Integrate necessary loaders with Webpack

babelcoder · May 9, 2016 · d5972e1 · d5972e1
1 parent 9453f1a
commit d5972e1
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}
diff --git a/.gitignore b/.gitignore
@@ -31,3 +31,6 @@ node_modules
 
 # Optional REPL history
 .node_repl_history
+
+# build directory
+static
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Babel Coder Wiki</title>
+  </head>
+  <body>
+    <div id='app'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import styles from './styles.scss'
+
+export default class HelloWorld extends Component {
+  render() {
+    return (
+      <div>
+        <h1 className={styles.greeting}>Hello World</h1>
+      </div>
+    )
+  }
+}
+
+render(<HelloWorld />, document.getElementById('app'))
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "babelcoder-wiki",
+  "version": "1.0.0",
+  "description": "BabelCoder Wiki!",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --hot --inline"
+  },
+  "author": "Nuttavut Thongjor",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^6.3.6",
+    "babel-core": "^6.8.0",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.8.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "node-sass": "^3.7.0",
+    "postcss-loader": "^0.9.1",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^2.1.0-beta.7",
+    "webpack-dev-server": "^2.0.0-beta"
+  },
+  "dependencies": {
+    "babel-runtime": "^6.6.1",
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2"
+  },
+  "peerDependencies": {
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2"
+  },
+  "engines": {
+    "node": "6.0.0",
+    "npm": "3.8.6"
+  }
+}
diff --git a/styles.scss b/styles.scss
@@ -0,0 +1,12 @@
+.greeting {
+  animation: text-animation 2s infinite;
+}
+
+@keyframes text-animation {
+  0% {
+    color: yellow;
+  }
+  100% {
+    color: red;
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,56 @@
+const webpack = require('webpack');
+const path = require('path');
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  devtool: 'eval',
+  entry: './index.js',
+  output: {
+    publicPath: '/static/',
+    path: path.join(__dirname, 'static'),
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loaders: [
+          'babel-loader'
+        ]
+      },
+      {
+        test: /\.css$/,
+        loaders: [
+          'style-loader',
+          'css-loader'
+        ]
+      }, {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        loaders: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            query: {
+              sourceMap: true,
+              module: true,
+              localIdentName: '[local]___[hash:base64:5]'
+            }
+          },
+          {
+            loader: 'sass-loader',
+            query: {
+              outputStyle: 'expanded',
+              sourceMap: true
+            }
+          },
+          'postcss-loader'
+        ]
+      }
+    ]
+  },
+  postcss: function () {
+    return [autoprefixer];
+  }
+};