smeuli
2/5/2018 - 11:13 AM

Webpack configuration (with separate development and production setup)

Webpack configuration (with separate development and production setup)

const path = require('path');

module.exports = {
	entry: './client/index.jsx',
	output: {
		path: 'public',
		publicPath: 'public/',
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
			{ test: /\.(jpe?g|png|gif|svg)$/, loader: 'file-loader?name=img/[name].[ext]' }
		]
	},
	resolve: {
		extensions: ['.js', '.jsx']
	}
};
const webpack = require('webpack');
const merge = require('webpack-merge');
const sharedConfig = require('./webpack.shared');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = merge(sharedConfig, {
	devtool: 'source-map',
	plugins: [
		// set NODE_ENV to production -> creates React production build
		new webpack.DefinePlugin({
			'process.env': { NODE_ENV: JSON.stringify('production') }
		}),

		// scope hoisting
		new webpack.optimize.ModuleConcatenationPlugin(),

		// minify code
		new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),

		// merge chunks
		new webpack.optimize.AggressiveMergingPlugin(),

		// GZIP
		new CompressionPlugin({
			asset: '[path].gz[query]',
			algorithm: 'gzip',
			test: /\.(js|html)$/,
			threshold: 10240,
			minRatio: 0.8
		})
	]
});
const merge = require('webpack-merge');
const sharedConfig = require('./webpack.shared');

module.exports = merge(sharedConfig, {
	watch: true,
	devtool: 'eval'
});