Put index.html into public/
Put app.es6 into src/
Put greeting.es6 into src/greeting
Run:
npm install
npm start - runs the webpack server.
Created
September 13, 2015 17:34
-
-
Save RossJHagan/ff6e0852d439569f5574 to your computer and use it in GitHub Desktop.
Webpack Baseline - ES6, React, Lodash
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import Greeting from './components/greeting'; | |
| React.render(<Greeting speaker="Timothy" speech="Hello, world!" />, document.getElementById('main')); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import _ from 'lodash'; | |
| export default class Greeting extends Component { | |
| render () { | |
| return ( | |
| <div> | |
| <div>{this.props.speaker}:</div> | |
| <div>{this.props.speech}</div> | |
| </div> | |
| ); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>React Baseline</title> | |
| </head> | |
| <body> | |
| <div id="main"></div> | |
| <script src="/public/assets/js/bundle.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "es6-learning", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "start": "webpack-dev-server" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "devDependencies": { | |
| "babel-core": "^5.8.24", | |
| "babel-loader": "^5.3.2", | |
| "browserify": "^11.1.0", | |
| "gulp": "^3.9.0", | |
| "gulp-babel": "^5.2.1", | |
| "gulp-concat": "^2.6.0", | |
| "gulp-connect": "^2.2.0", | |
| "gulp-sourcemaps": "^1.5.2", | |
| "node-libs-browser": "^0.5.2", | |
| "path": "^0.11.14", | |
| "strip-loader": "^0.1.0", | |
| "vinyl-source-stream": "^1.1.0", | |
| "webpack": "^1.12.1" | |
| }, | |
| "dependencies": { | |
| "lodash": "^3.10.1", | |
| "react": "^0.13.3" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Production mode | |
| * | |
| * Inherits from the default webpack.config.js but adds a loader that strips out console.log calls | |
| * | |
| * @type {StripFnLoader|exports|module.exports} | |
| */ | |
| var WebpackStrip = require('strip-loader'); | |
| var devConfig = require('./webpack.config.js'); | |
| var stripLoader = { | |
| test: [ /\.js$/, /\.es6$/ ], | |
| exclude: /node_modules/, | |
| loader: WebpackStrip.loader('console.log') | |
| }; | |
| devConfig.module.loaders.push(stripLoader); | |
| module.exports = devConfig; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var path = require('path'); | |
| /** | |
| * | |
| * context: path in which to find the entry | |
| * entry: string|array[string] - one or more entry points, see the webpack docs for more about multiple entry points | |
| * output: where to find the javascript built from the entry point | |
| * path: put the output into this folder, except when on the dev server when it will be stored in memory | |
| * publicPath: where this will be found on the dev server's file system | |
| * filename: the filename! | |
| * devServer: set up dev server options | |
| * contentBase: sets the web root to serve out of this folder | |
| * watch: bool - track changes in your entry point (and dependencies) | |
| * modules: expand the capabilities of webpack with more loaders | |
| * loaders: [] receives array of loads, raw objects with a required three fileds | |
| * test: regex - should match the files to be handled by this loader | |
| * exclude: regex - should match the files to be ignored by this loader | |
| * loader: one or more loaders to handle the given test/exclude | |
| * resolve: | |
| * extensions: used to allow the es6 file extension | |
| * | |
| * @type {{context, entry: string, output: {path, publicPath: string, filename: string}, devServer: {contentBase: string}, watch: boolean, module: {loaders: *[]}, resolve: {extensions: string[]}}} | |
| */ | |
| module.exports = { | |
| context: path.resolve('src'), | |
| entry: "./app.es6", | |
| output: { | |
| path: path.resolve('build/js/'), | |
| publicPath: "/public/assets/js/", | |
| filename: "bundle.js" | |
| }, | |
| devServer: { | |
| contentBase: "public/" | |
| }, | |
| watch: true, | |
| module: { | |
| loaders: [ | |
| { | |
| test: /\.(js|es6)$/, | |
| exclude: /node_modules/, | |
| loader: "babel-loader" | |
| } | |
| ] | |
| }, | |
| resolve: { | |
| extensions: [ "", ".js", ".es6" ] | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment