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

announce
1

Meteor is really an awesome tool to build great Web apps and get productive fast. I absolutely love it. That’s why 6 months ago I created a package that allows you to plug Webpack with Meteor. I though if we could add a real-time hot reload, ES6 modules, bundle assets with the code and do code splitting, it would make Meteor 2x cooler and it did.

One thing I was not happy about was how hard it is to configure Webpack. You have to learn a bunch of new concepts just to be able to write those damn webpack.config.js files. I hate those files because they are complex no matter how easy what you are trying to accomplish.

So I went back to the drawing board to bring a new integration of Webpack. One that will be simple enough that it will be fast as hell to start and flexible enough so that you get to customize your build process as much as you want.

Today I am releasing a complete new version of webpack:webpack. Webpack configs are now gone! You can setup Webpack features simply by adding packages and tweak the settings with a JSON file. It’s seriously easy. FYI it’s already 100% compatible with Meteor 1.3.

If you want to learn how to become more productive with Meteor by using Webpack, you can get a free 7-days course on TheReactiveStack.com.

Now you can get hot-reload with React by doing a simple command: meteor add webpack:react.

You do code spliting with a single line of code with require.ensure (Webpack 2 is bringing a better syntax!).

You can use TypeScript, SASS, LESS and much more by adding a single package.

And this is just a beginning. Anyone can write a Meteor package to wrap a specific Webpack configuration. If you feel like something is missing, please open an issue and I would love to add the missing features or packages :slight_smile:

This version might be 1.0 but it is far from being final. The future of webpack with Meteor will be ultimately decided by the community. I hope to get as much feedback and contributions as the previous version. Thank you so much everyone, I honor how much this community gives and helps.

I can’t wait to see this in action within your Meteor projects, let me know how it goes!

Benoit

PS. Don’t forgot the get the free 7-days course on TheReactiveStack.com.

PS2- I’ve also updated the kickstart projects. Go take a look!

59 Likes
2

Wow, unbelievable product, unbelievable work!

2 Likes
3

Thank you for this! Its seriously awesome stuff! :grinning:

2 Likes
4

yessss. thank you! :smiley:

1 Like
5

Oh, great news.
Your github was quite inactive at Jan-Feb, but i’m happy that it was a delusion.

B.T.W. Is it possible to instantly update existing project, or it would require reconfig at first?

3 Likes
6

Great, thank you! I’m still quite fresh with Meteor, so Webpack was a nogo area, but this could change all that ;)…

@benoitt FYI: About the course: that’s amazing that you’ve had the time to create that too, but I was unable to get in, the submit does nothing atm.
Besides that there is a small issue with http/https content:

Mixed Content: The page at 'https://thereactivestack.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Raleway:400,700,800&subsetting=all'. This request has been blocked; the content must be served over HTTPS.

1 Like
7

Great idea to wrap Webpack plugins & loaders into incremental packages to improve the learning curve :+1: Great work! Looking forward to improved initial build times.

3 Likes
8

I’m signed up and waiting with bated breath :smile:

1 Like
9

Wow, I feel so blessed to have so much enthousiastic people in the Meteor community!

I was actually half inactive. I was REALLY busy with a lot of projects (and still are) but I’m trying my best to give a better support.

For the migration path, it will be very minimalist if you keep your webpack.config.js files. Your package.json file will be automatically migrated. The only missing piece will be to set the correct entry files in it. It shouldn’t take you a lot of time. If anything goes wrong let me know :slightly_smiling:

10

good job!..

2 Likes
11

I added the support of .babelrc file. If you have a .babelrc file in your root, you can add new presets/plugins. Example:

{
  "plugins": ["jsx-control-statements"]
}
1 Like
12

@benoitt, is there any reason that you have to depend on react-runtime and not purely on NPM’s react and react-dom?

13

You don’t have to depend on react-runtime. However if you do, webpack will make sure you use the Meteor version instead of NPM.

If you don’t use react-runtime, you can’t use ReactMeteorData, correct me if I’m wrong.

1 Like
14

Is it compatible with the structure recommended by mantra?

15

Yes it is! I am currently looking into adding an official mantra kickstarter. webpack:webpack don’t care very much about your file structure or any tech used within Meteor.

For now you can look at this repo but ATM it is still on the old meteor-webpack version.

16

Because I tried to add it to a https://github.com/mantrajs/mantra-sample-blog-app project and it didn’t seem to work - it throw an error that Npm is not defined.

But maybe I should wait for the first email of the 7 day series :slightly_smiling:

17

Okay thanks. I wasn’t interested in using ReactMeteorData, that’s why I asked.

18

I’m looking with the Mantra community how we will do it but hopefully it will be integrated soon :slight_smile:

3 Likes
19

Right now I’m trying this out with a Mantra app… I hope everything works! :smile:

1 Like
20

Just making this as a placeholder to go back once the Mantra thing has been sorted out. Would be great to be able to do code splitting with the application i’m building.