Skip to content

Instantly share code, notes, and snippets.

@jwalton
Created March 29, 2019 13:52
Show Gist options
  • Save jwalton/721e1643dbb262d44f7cc44b9fa9bef3 to your computer and use it in GitHub Desktop.
Save jwalton/721e1643dbb262d44f7cc44b9fa9bef3 to your computer and use it in GitHub Desktop.
webpackMiddleware
import * as express from 'express';
import { createRouter } from './routes';
import translations from './translations';
const WEBPACK_AVAILABLE = (() => {
try {
require('webpack');
return true;
} catch (err) {
return false;
}
})();
// Only run in development mode if dev-dependencies (i.e. webpack) are installed, and NODE_ENV is not "production".
const DEVELOPMENT_MODE = process.env.NODE_ENV !== 'production' && WEBPACK_AVAILABLE;
export default function makeUiMiddleware() {
const router = express.Router();
// Serve JS and CSS files via webpack-dev-middleware - this makes it so changes to the code are updated
// right away.
if (DEVELOPMENT_MODE) {
const makeWebpackMiddleware = require('./webpackMiddleware').default; // tslint:disable-line no-var-requires
router.use(makeWebpackMiddleware());
}
router.use('/', createRouter());
return router;
}
export { translations };
import * as express from 'express';
import _ from 'lodash';
import * as path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const WEBPACK_CONFIG: webpack.Configuration = require('../../webpack.config');
function toAbsolutePath(entry: string) {
return entry.startsWith('.') ? path.resolve(__dirname, '..', '..', entry) : entry;
}
function toAbsolutePaths(entries: string | string[]) {
if (Array.isArray(entries)) {
return entries.map(toAbsolutePath);
} else {
return toAbsolutePath(entries);
}
}
export default function makeWebpackDevMiddleware() {
const answer = express.Router();
const webpackConfig = _.cloneDeep(WEBPACK_CONFIG);
// Remap entries to absolute paths
if (!webpackConfig.entry) {
// Do nothing
} else if (typeof webpackConfig.entry === 'string') {
webpackConfig.entry = toAbsolutePaths(webpackConfig.entry);
} else if (Array.isArray(webpackConfig.entry)) {
webpackConfig.entry = toAbsolutePaths(webpackConfig.entry);
} else if (typeof webpackConfig.entry === 'object') {
for (const name of Object.keys(webpackConfig.entry)) {
webpackConfig.entry[name] = toAbsolutePaths(webpackConfig.entry[name]);
}
}
const publicPath = (webpackConfig.output && webpackConfig.output.publicPath) || '/';
const hmrUrl = publicPath + '__webpack_hmr';
(webpackConfig as any).entry.messenger.push(`webpack-hot-middleware/client?path=${hmrUrl}`);
const compiler = webpack(webpackConfig);
answer.use(
webpackMiddleware(compiler, {
lazy: false,
publicPath,
})
);
answer.use(
webpackHotMiddleware(compiler, {
path: hmrUrl,
})
);
return answer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment