Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible Webpack support? #14

Open
lighth7015 opened this issue Jan 11, 2018 · 3 comments
Open

Possible Webpack support? #14

lighth7015 opened this issue Jan 11, 2018 · 3 comments

Comments

@lighth7015
Copy link

Is it possible that Ouch could support the Webpack dev server?

@harishanchu
Copy link
Member

If you take a look at api docs it's possible to provide additional scripts to pretty page handler. Would that be good enough?

@lighth7015
Copy link
Author

Yeah, I'll just have to find the time to create an error handler for webpack.

@lighth7015
Copy link
Author

=== Update ===
So I've been playing around with Ouch, and this is the closest thing I can figure to something that works, but it won't for some reason-

var Ouch = require('ouch')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')

const { HotModuleReplacementPlugin, DefinePlugin, NoEmitOnErrorsPlugin } = webpack;

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach((name) => (
	baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) ))

module.exports = merge(baseWebpackConfig, {
	module: {
		rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
	},
	
	// cheap-module-eval-source-map is faster for development
	devtool: '#cheap-module-eval-source-map',
	devServer: {
		host: '0.0.0.0',
		port: 8800,
		
		before(app) {
			const ouch = new Ouch();
			const { handlers: { PrettyPageHandler }} = Ouch;
			
			const logError = () => 
				console.log('Error handled');
			
			app.use((err, req, res, next) => (
				ouch.pushHandler(new PrettyPageHandler())
					.handleException(err, req, res, logError)));
			
			console.log(instance);
			console.log(app);
		},
	},
	
	plugins: [
		new DefinePlugin({
			'process.env': config.dev.env
		}),
		
		// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
		new HotModuleReplacementPlugin(),
		new NoEmitOnErrorsPlugin(),
		
		// https://github.com/ampedandwired/html-webpack-plugin
		new HtmlWebpackPlugin({
			filename: 'index.html',
			template: 'index.html',
			inject: true
		})
	]
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants