Meteor-Webpack [New Project] - even with Hot Module Replacement and any Webpack plugins/loaders

#1

I created a Meteor package for Webpack to use Meteor’s compiler like you do in Webpack.
You can use any features of Webpack with Meteor such as Webpack’s lazy modules, hot module replacement without page reloading, detailed compilation log etc…
Also you can use any webpack plugins/loaders with Meteor-Webpack.
Now you don’t need to search atmosphere package for your favorite stack. You can use webpack plugins for vue, react, angular, sass, less, pug, etc…
There are some minimal examples with React, Angular, Vue.
You can check it out!

20 Likes
Is it possible to import SASS variables inside JS code?
#2

Seems like a really neat approach. Hope to test it out soon, can use anything to improve my rebuild speeds.

4 Likes
#3

Hello, congrats! That’s awesome.

I’ll try this out.

My main focus is rebuild speed too but if we could have HMR too will be even better.

2 Likes
#4

Looks very interesting! I’ll give it a try.

Just a quick note, did you publish ardatan:webpack-dev-middleware to atmosphere?

2 Likes
#5

Thank you for your comments :slight_smile:
It is my mistake, I forgot that package and some typos in first release. I released new version for webpack package and the other dev-middleware one. You can check them out now.
Please let me know if there is any problem.

2 Likes
#6

Thanks for the quick response @ardatan!

I’m running into one more issue and please forgive my ignorance with webpack, but here is the error I’m seeing:

  While processing files with ardatan:webpack (for target os.osx.x86_64):
   packages/webpack_plugin.js:74:31: webpack is not defined
   at Object.constructNewCompilerForTarget (packages/webpack_plugin.js:74:31)
   at Object.processFilesForTarget (packages/webpack_plugin.js:85:22)

Any idea what might be causing this? Am I missing some installations?

1 Like
#7

It was my mistake, I am really sorry about it, I published new version for this, and you can update that package by meteor update and try again. Please let me know any updates :slight_smile:

#8

Yup, thanks, I think it worked when I cloned the webpack packaged locally. I’ll try your new version and let you know :smiley:

1 Like
#9

Thank you! You can also open an issue on GitHub as well. I am waiting for your feedback :slight_smile:

#10

Will do, yes, sorry I think I should have kept the issues there.

1 Like
#11

Hello guys, let’s join our forces and help @ardatan to make it work :wink: I’m very excited!

I already open a few issues, please read in the repository and give your opinion to help us. https://github.com/ardatan/meteor-webpack/issues

4 Likes
#12

This just came in the right time, thanks very much, I will give it a try as soon as possible.

#13

Now it supports HMR for both client and server!
You can improve your development experience in Meteor, please I need your support and help to make this package better!

Thanks!

1 Like
#14

Wow! This is an awesome plugin! Thanks Ardatan!

It’s great to have HMR for virtually instant save and reload debug cycles, instead of the usual save… wait … wait… cycles

The code also looks like a good integration between Webpack and Meteor. Maybe this could become an official MDG package? Or what type of support would be needed to keep this around for the long term? It seems like the last webpack integration package (webpack:webpack) is no longer maintained.

Hopefully this one will stay around for the long term, perhaps there could be a patreon page for the project.

2 Likes
#15

Thank you! I’d love to get an official support.

#16

Hey, so since this package requires you to remove the ecmascript package which dynamic importing is dependent on, does anyone have any ideas how we could get dynamic importing to work with this plugin?

#17

It is written in the docs that you have to remove ecmascript package and all other compiler packages.
Dynamic import feature is provided by webpack which you can learn more about webpack docs. You don’t need to worry about dynamic import/lazy loading, because all module and bundling system is also provided by Webpack.

You can see the blog post here;