Skip to content

Instantly share code, notes, and snippets.

@Nosherwan
Created October 23, 2015 09:56
Show Gist options
  • Save Nosherwan/c5d2bcd0c5bd648d095e to your computer and use it in GitHub Desktop.
Save Nosherwan/c5d2bcd0c5bd648d095e to your computer and use it in GitHub Desktop.
Simple Webpack config for React 0.14.0 App
{
"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"
}
}
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
]
};
@Nosherwan
Copy link
Author

I am currently using these files for a react 0.14.0 flux app that uses fetch api for ajax calls.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment