Skip to content

Instantly share code, notes, and snippets.

@remy
Created October 9, 2016 16:29
Show Gist options
  • Save remy/ce019c82940b624de21dcafb3e6f69af to your computer and use it in GitHub Desktop.
Save remy/ce019c82940b624de21dcafb3e6f69af to your computer and use it in GitHub Desktop.
A webpack config with dynamic loader to be used with React
// filename: lib/dev.js
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpack = require('webpack');
// expects to live in ./lib
const config = Object.assign({}, require('../webpack.config.dev'), {
// customisations that were typically off, but I could turn on during experiments
});
module.exports = app => {
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: config.output.publicPath,
}));
app.use(webpackHotMiddleware(compiler));
};
const webpack = require('webpack');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'babel-polyfill',
__dirname + '/src/polyfills.js', // polyfills for Promise and fetch
__dirname + '/src/client.js' // boot code for the client
],
output: {
path: __dirname + '/public',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{
loader: 'babel-loader',
exclude: /node_modules/,
include: __dirname,
test: /\.jsx$/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'react-hmre'],
}
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
include: __dirname,
query: {
presets: [ 'react-hmre' ]
}
}
]
}
};
const webpack = require('webpack');
module.exports = {
entry: ['babel-polyfill', __dirname + '/src/polyfills.js', __dirname + '/src/client.js'],
output: {
path: __dirname + '/public',
publicPath: '/',
filename: 'bundle.js'
},
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.json']
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment