/** * Build for production: * $ NODE_ENV=production webpack * * Build for staging or development mode * $ webpack * * Run app server in dev mode and use Hot Module Replacement * $ NODE_ENV=webpack nodemon --watch ./app index.js * */ var webpack = require('webpack'); var autoprefixer = require('autoprefixer-core'); function isProduction() { return process.env.NODE_ENV == 'production'; } function isWebpack() { return process.env.NODE_ENV == 'webpack'; } function addHotEntries(base) { var entries = []; if (isWebpack()) { entries.push('webpack/hot/dev-server', 'webpack-hot-middleware/client'); } entries.push(base); return entries; } module.exports = { entry: { 'main': addHotEntries('./public/js/main.js') }, output: { path: require('path').resolve('./public/_/'), publicPath: '/assets/', filename: '[name].js', // it’s useful to have static filenames in development mode and hash-based in production chunkFilename: isProduction() ? '[chunkhash].chunk.js' : '[id].chunk.js' }, module: { loaders: (function () { var list = []; if (isWebpack()) { // add react hot loader only to jsx files list.push({ test: /\.jsx$/, loader: 'react-hot' }); } list.push([ // any js run through babel { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0' }, // load css as is { test: /\.css$/, loader: 'style-loader!css-loader?-minimize' }, // process less files using postcss plugins { test: /\.less$/, loader: 'style-loader!css-loader?-minimize!postcss-loader!less-loader' }, // load external assets as files. use url-loader to embed them into styles { test: /\.(eot|ttf|woff|woff2|svg|png|jpg|jpeg)$/, loader: 'file-loader' } ]); return list; })() }, postcss: function () { return [autoprefixer] }, plugins: (function () { var plugins = []; plugins.push( new webpack.DefinePlugin({ // nice to have environment mode as JS variable 'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"' }) ); if (isWebpack()) { plugins.push( new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ); } if (isProduction()) { plugins.push( new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ); } return plugins; }()) };