Skip to content
Permalink
Browse files

Integrate necessary loaders with Webpack

  • Loading branch information
n-thongjor committed May 9, 2016
1 parent 9453f1a commit d5972e1a7ad68fc5d52cfa32efd3bd7748d1d99f
Showing with 141 additions and 0 deletions.
  1. +3 −0 .babelrc
  2. +3 −0 .gitignore
  3. +11 −0 index.html
  4. +15 −0 index.js
  5. +41 −0 package.json
  6. +12 −0 styles.scss
  7. +56 −0 webpack.config.js
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "stage-0", "react"]
}
@@ -31,3 +31,6 @@ node_modules

# Optional REPL history
.node_repl_history

# build directory
static
@@ -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>
@@ -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'))
@@ -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"
}
}
@@ -0,0 +1,12 @@
.greeting {
animation: text-animation 2s infinite;
}

@keyframes text-animation {
0% {
color: yellow;
}
100% {
color: red;
}
}
@@ -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];
}
};

0 comments on commit d5972e1

Please sign in to comment.
You can’t perform that action at this time.