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'
});