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

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

Yes you can use local packages. And you can access the global variables they export or import them if you’re on 1.3

Is there a tutorial somewhere on how to use webpack with Blaze?

Not ATM, could be a great idea to do.

You can create .html files for your Blaze templates anywhere FYI.

Heres a simple repo with Vue-Webpack-Meteor and Vue Router. However I cant get hot reload to work as well. Actually I can not even get a regular live reload to work. I have to manually refresh the page.

Yeah I saw the same thing, I got it to work by modify the webpack:webpack package’s WebpackCompiler class to just always add the HMR plugin with
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());. Then HMR works alright, but if you’re on a page and HMR updates a component, then you navigate to another route and back, the changes that were done with HMR are gone. If anyone knows why HMR changes would be lost when navigating between routes, some help would be appreciated