Use Webpack with Meteor simply by adding packages (meteor-webpack 1.0 is out!)

Thank you @benoitt for awesome work, I’m currently working on Udemy course for showcasing the implementation of subscription-based payments in Meteor app with Braintree, started with Mantra boilerplate and transforming it to React + React Router + Redux + Webpack + PostCSS stack.

2 Likes

Hi @benoitt, is there any compatible version for “The Meteor Chef - Base” v3.4? which works with Meteor 1.2 and Blaze

Thanks for your great job :wink:

I’m not sure what you’re looking for but Blaze is not supported with webpack for now. webpack:blaze could be using spacebars-loader but I think it’s old and no maintenance AFAIK.

The maintainers of spacebars-loader have been resurrected to possibly webpackize blaze: https://github.com/meteor/blaze/issues/11

2 Likes

Any idea on when you will release it?

Just made a major bug fix on webpack:webpack that should fix bundling / deployment (was missing NPM packages!).

Now it bundles the required node_modules with your application so nothing is missing on your server. All your dependencies in your package.json will be there. Note that devDependencies are not going to be there (they should only be required when building).

Hope this helps :slight_smile:

hey @benoitt, thanks for adding the Vue package! I just tried it out and it works well for building and importing .vue component files, but HMR doesn’t work for me, neither does plain old meteor hot reload, so I have to manually refresh the page to see changes

No this is not intentional. I don’t know Vue.js very much and I made a first version that was at least working but I would be happy to improve it.

I would love to get some input from @benjamn on how you see this new version of webpack support. I know like most people you hate how Webpack gets complicated to setup (like me or anyone else).

Is it still a plan de re-code webpack features inside Meteor or do you think abstracting a simplier API of Webpack 2 will be the future of Meteor?

Not that I don’t think the Meteor build system is not great (it is) but what we are trying to do is really complex and been done really well with Webpack.

2 Likes

Hi @benoitt thanks you for your wonderful work. It got my productivity on a rocket and put all builder boilerplate head hashes away.
I wonder if there is a way to use source map when debugging in the chrome console? Right now it is only point ont the compiled vanilla js code.

let’s do it :slight_smile: here’s the vue-loader docs for HMR, it relies on having a webpack dev server (vue-loader hmr docs), or webpack-hot-middleware if you’re running your own server and want to integrate with that instead of running a separate webpack-dev-server. I tried taking a look at how React hmr works but I’m not familiar with it and it doesn’t look like it translates since it uses a babel transform. I see that you mention a devServer in the webpack:webpack docs, could you elaborate on that a bit?

Great stuff @benoitt got the demos working with webpack. I had problems getting webpack to work with a levelup tutorial and abandoned it so it’s really helpful for a novice like myself.

1 Like

webpack:webpack is already running a webpack-dev-middleware so that hot reload is possible. For react we are using webpack-hot-middleware but I’m not sure how to set it up with vue. It seems to be a big black box to me.

alright I’ll take a look and see if I can get it working in a fork

1 Like

What is a webpack, and is that something a newbie is interested in.

This is amazing work @benoitt. Thankyou for your hard work. I’ve been busy porting to React so that I can use this lib.

I have a newbie question - can we use webpack:sass/less as a preprocessor then webpack:postcss to autoprefix our styles? Is this as simple as adding the packages? Or is there addition webpack config to do?

2 Likes

Not ATM but the support was originally planned. Shouldn’t take much time.

2 Likes

@benoitt thanks for this great work!!

The Vue Hot Reload works in version 1.0.3 fine but in 1.0.8 not.
Do you have a idea how can fix this?

best

I’ll check this. Thanks for noticing!

Another newbie question…Can I use local atmosphere packages in webpack (i.e. packages that i’ve created within my app’s /packages folder)?

If not, is there a recommended path that I should towards to make this happen?

Thanks