Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Redux/React/Babel webpack config w production variables
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var sassLoaders = [
'css',
'autoprefixer-loader?browsers=last 2 version',
'sass-loader?includePaths[]=' + __dirname + '/app/styles&sourceMap=true'
];
//set entry-points and plugins that are the same across dev and prod.
var entry = [
'./app/scripts/index.jsx'
//'./app/styles/.scss'
];
var plugins = [
new ExtractTextPlugin('[name].css', {allChunks: true})
]
var jsLoader = 'react-hot!babel';
//in production, uglify that javascript!
if (process.env.NODE_ENV === 'production'){
plugins.push(
new webpack.optimize.UglifyJsPlugin({minimize: true})
);
jsLoader = 'babel';
} else {
//in dev, add the dev server entry-points and hot module replacement.
entry.push(
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server'
);
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
);
}
var config = {
entry: entry,
module: {
preloaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: ['jshint-loader','jscs-loader']
}
],
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: jsLoader
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
}
]
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devtool: 'source-map',
plugins: plugins,
devServer: {
contentBase: './dist',
hot: true
}
};
//to make server magic, run: webpack-dev-server --inline --hot
module.exports = config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.