Fix emitcss

[kaisermann]

This PR makes the loader write CSS files directly to webpack's virtual filesystem (thanks to webpack-virtual-modules).

The usage is something like:

// webpack.config.js
const SvelteWebpack = require('svelte-loader')
module.exports = {
	...
	module: {
		rules: [
			{
				test: /\.html$/,
				exclude: /node_modules/,
				use: {
					loader: SvelteWebpack.loader,
					options: {
						emitCss: true
					}
				}
			},
			{
				test: /\.css$/,
				use: ['css-loader']
			}
		]
	},
	plugins: [
		SvelteWebpack.plugin,
	]
};

[Rich-Harris]

@kaisermann Thank you!

Webpack's bizarre distinction between loaders and plugins is unfortunate, because I think it's a little bit confusing to need both SvelteWebpack.loader and SvelteWebpack.plugin, and someone upgrading an existing project to this version of svelte-loader would see a very unhelpful and cryptic error message from webpack-virtual-modules.

So I wondered if we could do it all in the loader, and #60 is what I came up with. It basically copies the relevant lines from webpack-virtual-modules but applies it to the compiler when the loader first runs, so a user of this loader doesn't need to make any further changes to their webpack config.

Does that seem like a workable approach (albeit somewhat hacky — not that we can really avoid hacks here)?

I'm still seeing that stack overflow with webpackHotUpdateCallback incidentally — I can't seem to fix it, and it seems to be resulting in style changes not being applied. (Changes to other parts of the component work fine with hot reloading.) Any ideas?

[kaisermann]

Oh, that was a good idea! I'll keep track of any updates and fixes on the webpack-virtual-modules.

You're getting the webpackHotUpdateCallback while testing it with the template-webpack?

[Rich-Harris]

Yeah — whether I'm using --hot or not doesn't appear to make a difference. Only way to prevent it is with hotReload: false on svelte-loader.

[kaisermann]

That's probably because the HotModuleReplacementPlugin is being instantiated twice. I created a PR that fixes it.

However, even without the stack error, I think the hot module replacement is not working properly yet.

Edit:

Using the branch from #60, now it seems that Svelte is not compiling the example template correctly:

[Rich-Harris]

Ah, nice — thanks. The {name} thing is just because of a version mismatch — this package has a peer dependency on v1, which seems to cause issues when it's npm linked. Next release will fix that.

Unfortunately there is a problem still — the stack overflow is gone, but it's not applying style changes correctly on hot reload. Will open a separate issue for that.

Thanks so much for all your help!