Update - if you want to use the ractive component spec instead of just parsing html templates and keeping component logic in a separate file, read this instead.

First grab the ractive-loader node package. Then use it in your webpack.config.js. Here's a stripped down sample configuration that will pre-compile Ractive .html templates for you using the ractive-loader node package:

module.exports = {
	entry: {
		app: './Client/js/App.js'
	},
	output: { filename: './wwwroot/js/[name].bundle.js' },
	module: {
		loaders: [
			{ test: /\.html$/, loader: 'ractive' }
		]
	},
	resolve: {
		extensions: ['', '.js', '.html']
	}
};

Then when webpack sees something like this...

App.js

var App = new Ractive({
	el: '#app',
	template: require('./App.html'),
	data: {
		title: 'Donkey Kong',
		heroes: [ 'Me', 'You', 'That other one' ]
	}
}); 

App.html

<h1>{{title}}</h1>
<ul>
	{{#each heroes}
		<li>{{.}}</li>
	{{/each}
</ul>

It will pre-compile App.html to ractive's js template format, and it's injected the same way requiring any other js module works.

If you're new to webpack, here's a webpack.config.js that'll do a few more useful things. Hopefully the comments explain enough.

var webpack = require('webpack');

// splits anything in the vendor entry point into a chunk that isn't duplicated into every other entrypoint
var chunkPlugin = new webpack.optimize.CommonsChunkPlugin(
	/* chunkName= */'vendor',
	/* filename= */'./wwwroot/js/vendor.bundle.js'
);

// minify javascript
var minifyPlugin = new webpack.optimize.UglifyJsPlugin({
	compress: {
		warnings: false
	}
});

// lazymode so we don't have to require Ractive in every component / endpoint / etc
var providerPlugin = new webpack.ProvidePlugin({
	Ractive: 'ractive'
});

module.exports = {
	entry: {
		vendor: [
			// vendor will include these packages
			// CommonsChunkPlugin tells the other entry bundles not to include anything that vendor includes
			'jquery',
			'ms-signalr-client',
			'ractive',
			'ractive-datetime',
			'bootstrap-sass',
			'grapnel'
		],

		// this app just has a couple entry points - one with login / register stuff, another for handling SSO redirects back, and a secure app
		public: './Client/js/Public.js',
		externalLoginConfirmation: './Client/js/ExternalLoginConfirmation.js',
		app: './Client/js/App.js'
	},
	output: { filename: './wwwroot/js/[name].bundle.js' },
	module: {
		loaders: [
			// compile ractive html into ractive js
			{ test: /\.html$/, loader: 'ractive' },

			// make $ and jQuery available globally - some packages are poopy and rely on it
			{ test: /jquery\.js$/, loader: 'expose?$' },
			{ test: /jquery\.js$/, loader: 'expose?jQuery' } 		]
	},
	plugins: [
		chunkPlugin,
		providerPlugin,
		minifyPlugin
	],
	resolve: {
		extensions: ['', '.js', '.html']
	}
};