Skip to content

Instantly share code, notes, and snippets.

@blutarche
Created November 28, 2016 13:38
Show Gist options
  • Save blutarche/fb6990b7685db3a3f31f91770c9c4c5f to your computer and use it in GitHub Desktop.
Save blutarche/fb6990b7685db3a3f31f91770c9c4c5f to your computer and use it in GitHub Desktop.
Webpack config for improving performance of development mode. (https://github.com/erikras/react-redux-universal-hot-example/issues/616)
require('babel-polyfill');
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = (+process.env.PORT + 1) || 3001;
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
var babelrc = fs.readFileSync('./.babelrc');
var babelrcObject = {};
try {
babelrcObject = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};
var combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);
var babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, {plugins: combinedPlugins});
delete babelLoaderQuery.env;
babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
var reactTransform = null;
for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) {
var plugin = babelLoaderQuery.plugins[i];
if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
reactTransform = plugin;
}
}
if (!reactTransform) {
reactTransform = ['react-transform', {transforms: []}];
babelLoaderQuery.plugins.push(reactTransform);
}
if (!reactTransform[1] || !reactTransform[1].transforms) {
reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []});
}
reactTransform[1].transforms.push({
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
});
module.exports = {
cache: true,
devtool: 'inline-eval-cheap-source-map',
context: path.resolve(__dirname, '..'),
entry: {
app_assets: ['./src/client.js'],
'main': [
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
// 'bootstrap-sass!./src/theme/bootstrap.config.js',
// 'bootstrap-sass!./src/theme/bootstrap.config.js',
'react-widgets-webpack!./src/theme/react-widgets.config.js',
'./src/client.js'
],
vendor: [
'react',
'react-dom'
]
},
output: {
path: assetsPath,
filename: '[name].dll.js',
library: '[name]',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + (port - 1) + '/dist/'
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'eslint',
include: [__dirname, path.join(__dirname, '../components')],
exclude: [path.join(__dirname, '../', 'node_modules')],
},
],
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
{ test: /\.css$/, loader: "style!css" },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
eslint: {
emitWarning: true
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE
}),
new webpack.DllPlugin({
name: '[name]',
path: path.join( assetsPath, '[name]-manifest.json' )
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment