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

announce
21

If I’m not mistaken, it appears hot reload doesn’t work with react from npm (because it adds react-runtime from meteor automatically)?

Marks-MacBook-Air:markshust$ meteor add webpack:react
                                                                                   
Changes to your project's package version selections:
                                              
jsx                  added, version 0.2.4     
react-meteor-data    added, version 0.2.5
react-runtime        added, version 0.14.4
react-runtime-dev    added, version 0.14.4
react-runtime-prod   added, version 0.14.4
webpack:core-config  added, version 1.0.0
webpack:react        added, version 1.1.0
22

You’re right. I’m pretty sure the dependency is not required, I’m looking if I can remove it safetly.

1 Like
23

Thanks for pointing this out to me I haven’t tested with HTTPS (oops).

But you should be able to subscribe. Is it still crashing?

24

When will the course be available? In the meantime, what would you recommend as the best intro? Fairly new to Meteor and haven’t used webpack before…

25

If you’re completely new to Meteor, I suggest that you first learn the basis with Blaze. You can go through the official tutorial. Then you can look at the kickstart projects with webpack and Meteor. Yuo can also try to start a new project by yourself by using the webpack:webpack documentation.

You can also look at Webpack tutorials but 90% of the stuff will not be useful because you don’t need to worry about the config.

The 7 day course should start by next week. :smile:

1 Like
26

Thank you for fantastic work, @benoitt! We are also using react from NPM (actually as much from NPM as possible), so removing dependency on Atmosphere’s version of react would be a great plus for us.

Webpack integration will hopefully allow to use NPM packages that load CSS modules (like react-toolbox) in Meteor projects. Looking forward to testing this out!

Thanks again,

Telman

27

Possibly the solution might be to publish a NPM version of this without the dependency. That way those on 1.3 using NPM React can continue forward and you avoid issues with those using the atmosphere react.

1 Like
30

Bravo Benoit! Great addition!

31

Wow awesome stuff.
But how is it about testing? Meteor 1.3 is going to have great and easy testing support. Has this package also testing support, is it on the roadmap or is there no testing support at all?

1 Like
32

It is already working with Velocity and you could certainly unit test with mocha outside of Meteor. I’m following closely how people are testing with Meteor 1.3 and it is absolutely on the roadmap to make sure everything you can do to test with Meteor 1.3 will work with webpack.

33

Hey @benoitt, that looks wonderful! Just one question: I understand webpack config files are not exactly super friendly but I was pretty happy with mine using postcss and img-loader… Where would I be able to add my own loaders?

34

You have two choice.

  1. You can use your own custom webpack.config.js file like before. Not a big deal if you really want to customize and already know Webpack.
  2. You can create your own Webpack config package. It’s super easy. Go look at how webpack:less is built.

Can you share your Webpack config with me? I would love to support more loaders, plugins and settings that people are using with regular Webpack configs. I can add support to what everyone need. This is part of the feedback I’m hoping that have here! :slightly_smiling:

1 Like
35

@mgarf @tyusupov @emmostrom @markoshust @lai

Dependency to react-runtime has been removed. By not having react-runtime in your Meteor packages, it will use the NPM version instead of forcing you to use the evil one ;).

All you need is to upgrade your webpack:webpack and webpack:react package.

3 Likes
36

if you’re no longer depending on the Meteor React package then you may wanna update this comment awesome work btw! can’t wait for the webpack 2.0 version so we can lazy-load without require.ensure

37

I see. I guess my question is where should my weback.config.js file should be placed and how would it play with other webpack packages?

Also, if I understand correctly you use the same configuration file for client and server most of the time?

Here is my client webpack config btw. I’m still struggling a bit using url-loader as I render emails with the server and therefore I need small images in the email to be linked and not inlined.

38

you should be able to configure image size limit like:

loader: 'url-loader?name=[name].[ext]&limit=8192'

so you should have image path when the image size is bigger than 8192

Btw. I would love to see a package for stylus and postcss like I have here: https://github.com/juliancwirko/react-boilerplate/blob/master/webpack.config.js#L38 I’ll try to find some time to create such package or even two packages, for stylus and for postcss.

39

Wow. Integration is so smooth now. No more cumbersome webpack configs. Incredible work!

40

I’m using ReactMeteorData with NPM’s react package (^0.14.6, via the other webpack starter) and it’s working fine. So it should be possible to do so with webpack:webpack too I suppose.

Eager to try this out… keep up the good work!!

41

Hey - yup I know but in my case I also want NOT to inline small images (when rendering emails from the server). I tried excluding paths with no luck. That’s why I fell back to file-loader.

42

@benoitt,

how can I achieve all code under if (Meteor.isServer) not to be shifted to client? Previous versions of webpack:webpack had this feature by default (as I remember), but now it’s not the default behaviour.

I guess I need to config webpack.json and add alias like "Meteor.isServer": false, but I don’t know what exactly I should write.