Created
October 23, 2015 09:56
-
-
Save Nosherwan/c5d2bcd0c5bd648d095e to your computer and use it in GitHub Desktop.
Simple Webpack config for React 0.14.0 App
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": "react-proj", | |
"version": "1.0.0", | |
"description": "A base to start a react+flux app", | |
"main": "index.js", | |
"scripts": { | |
"start": "webpack-dev-server --hot --inline" | |
}, | |
"author": "NoshGhazanfar", | |
"license": "ISC", | |
"private": true, | |
"devDependencies": { | |
"babel-loader": "^5.3.2", | |
"css-loader": "^0.19.0", | |
"exports-loader": "^0.6.2", | |
"extract-text-webpack-plugin": "^0.8.2", | |
"file-loader": "^0.8.4", | |
"imports-loader": "^0.6.4", | |
"react-hot-loader": "^1.3.0", | |
"script-loader": "^0.6.1", | |
"style-loader": "^0.12.4", | |
"url-loader": "^0.5.6", | |
"webpack": "^1.12.2", | |
"webpack-dev-server": "^1.12.0" | |
}, | |
"dependencies": { | |
"bootstrap": "^3.3.5", | |
"es6-promise": "^3.0.2", | |
"flux": "^2.1.1", | |
"history": "^1.12.5", | |
"keymirror": "^0.1.1", | |
"localforage": "^1.2.10", | |
"lodash": "^3.10.1", | |
"react": "^0.14.0", | |
"react-bootstrap": "^0.27.2", | |
"react-dom": "^0.14.0", | |
"react-router": "^1.0.0-rc3", | |
"react-router-bootstrap": "^0.19.2", | |
"react-sidebar": "^2.0.0", | |
"whatwg-fetch": "^0.9.0" | |
} | |
} |
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'); //node module to resolve paths | |
var webpack = require('webpack'); | |
module.exports = { | |
debug : true, | |
devtool : 'source-map', | |
context : path.join(__dirname, 'app'), //get correct path for root both nix & windows | |
entry : { //multiple entry points | |
javascript: './js/app.js', //main file | |
html : './index.html' | |
}, | |
output : { | |
filename : 'bundle.js', //destination file name | |
path : path.join(__dirname, 'dist'), //destination folder | |
publicPath: '/public/' //append this to your url when trying to access app | |
}, | |
module : { //add multiple loaders to process files | |
loaders: [ | |
{ | |
test : /\.js$/, //ext regex | |
exclude: [/node_modules/, /typings/], //regex in array def required | |
loaders: ['react-hot', 'babel-loader'] | |
}, | |
{ | |
test : /\.html$/, | |
loader: 'file?name=[name].[ext]' | |
}, | |
{ | |
test : /\.css$/, //only css files | |
loader: 'style!css' // Run both loaders | |
}, | |
{ | |
test : /\.woff/, | |
loader: 'url?prefix=font/&limit=10000&mimetype=application/font-woff' | |
}, { | |
test : /\.ttf/, | |
loader: 'file?prefix=font/' | |
}, { | |
test : /\.eot/, | |
loader: 'file?prefix=font/' | |
}, { | |
test : /\.svg/, | |
loader: 'file?prefix=font/' | |
} | |
] | |
} | |
, plugins: [ | |
new webpack.ProvidePlugin({ //these two poly fills are required to use fetch api | |
'Promise': 'es6-promise', // Thanks Aaron (https://gist.github.com/Couto/b29676dd1ab8714a818f#gistcomment-1584602) | |
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' | |
}), | |
new webpack.optimize.UglifyJsPlugin({minimize: true}) //uncomment this line to minify the code | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am currently using these files for a react 0.14.0 flux app that uses fetch api for ajax calls.