await new Promise(resolve => {
// Hot Module Replacement (HMR) + React Hot Reload
if (config.debug) {
config.entry.client = ['react-hot-loader/patch', 'webpack-hot-middleware/client']
.concat(config.entry.client);
config.output.filename = config.output.filename.replace('[chunkhash', '[hash');
config.output.chunkFilename = config.output.chunkFilename.replace('[chunkhash', '[hash');
config.module.loaders.find(x => x.loader === 'babel-loader')
.query.plugins.unshift('react-hot-loader/babel');
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new webpack.NoErrorsPlugin());
}
const bundler = webpack(webpackConfig);
const wpMiddleware = webpackMiddleware(bundler, {
// IMPORTANT: webpack middleware can't access config,
// so we should provide publicPath by ourselves
publicPath: config.output.publicPath,
// Pretty colored output
stats: config.stats,
// For other settings see
// https://webpack.github.io/docs/webpack-dev-middleware
});
const hotMiddleware = webpackHotMiddleware(bundler.compilers[0]);
let handleBundleComplete = async () => {
handleBundleComplete = stats => !stats.stats[1].compilation.errors.length && runServer();
const server = await runServer();
const bs = browserSync.create();
bs.init({
...(config.debug ? {} : { notify: false, ui: false }),
proxy: {
target: server.host,
middleware: [wpMiddleware, hotMiddleware],
proxyOptions: {
xfwd: true,
},
},
}, resolve);
};
bundler.plugin('done', stats => handleBundleComplete(stats));
});
await new Promise(resolve => {
// enable HMR
webpackConfig.filter(x => x.target !== 'node').forEach(config => {
if(Array.isArray(config.entry)) {
config.entry.unshift('webpack-hot-middleware/client')
} else {
config.entry = ['webpack-hot-middleware/client', config.entry]
}
config.plugins.push(new webpack.HotModuleReplacementPlugin())
config.plugins.push(new webpack.NoErrorsPlugin())
})
const compiler = webpack(webpackConfig)
compiler.apply(new webpack.ProgressPlugin({
profile: false
}))
const wpMiddleware = webpackMiddleware(compiler, {
publicPath: webpackConfig[0].output.publicPath,
stats: webpackConfig[0].stats,
})
const hotMiddlewares = compiler.compilers.filter(compiler => {
return compiler.options.target !== 'node'
}).map(compiler => webpackHotMiddleware(compiler))
let handleServerBundleComplete = () => {
runServer((err, host) => {
if(!err) {
const bs = BrowserSync.create()
bs.init({
...(DEBUG ? {} : {
notify: false,
ui: false
}),
proxy: {
target: host,
middleware: [wpMiddleware, ...hotMiddlewares],
},
files: ['dist/public/**/*.*'],
}, resolve)
handleServerBundleComplete = runServer
}
})
}
compiler.plugin('done', () => handleServerBundleComplete())
})
await new Promise(resolve => {
// Patch the client-side bundle configurations
// to enable Hot Module Replacement (HMR) and React Transform
webpackConfig.filter(x => x.target !== 'node').forEach(config => {
if (Array.isArray(config.entry)) {
config.entry.unshift('webpack-hot-middleware/client');
} else {
/* eslint-disable no-param-reassign */
config.entry = ['webpack-hot-middleware/client', config.entry];
/* eslint-enable no-param-reassign */
}
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new webpack.NoErrorsPlugin());
config.module.loaders
.filter(x => x.loader === 'babel-loader')
.forEach(x => x.query = { // eslint-disable-line no-param-reassign
// Wraps all React components into arbitrary transforms
// https://github.com/gaearon/babel-plugin-react-transform
plugins: [
['react-transform', {
transforms: [
{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module'],
}, {
transform: 'react-transform-catch-errors',
imports: ['react', 'redbox-react'],
},
],
},
],
],
});
});
const bundler = webpack(webpackConfig);
const wpMiddleware = webpackMiddleware(bundler, {
// IMPORTANT: webpack middleware can't access config,
// so we should provide publicPath by ourselves
publicPath: webpackConfig[0].output.publicPath,
// Pretty colored output
stats: webpackConfig[0].stats,
// For other settings see
// https://webpack.github.io/docs/webpack-dev-middleware
});
// const hotMiddlewares = bundler.compilers
// .filter(compiler => compiler.options.target !== 'node')
// .map(compiler => webpackHotMiddleware(compiler));
let handleServerBundleComplete = () => {
runServer((err, host) => {
resolve()
// if (!err) {
// const bs = Browsersync.create();
// bs.init({
// proxy: {
// target: host,
// middleware: [wpMiddleware, ...hotMiddlewares],
// },
// // no need to watch '*.js' here, webpack will take care of it for us,
// // including full page reloads if HMR won't work
// files: ['build/content/**/*.*'],
// }, resolve);
// handleServerBundleComplete = runServer;
// }
});
};
bundler.plugin('done', () => handleServerBundleComplete());
});