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

Ok well, to come back with my issue with clearing react-runtime from the project: the chunk issue came from react-helmet that I run from npm (!!!). I have absolutely no idea why, but removing Helmet from my components makes it work and I have a code splitting, meteor-react free app working just fine !!

PS: at the moment I’m removing manually webpack:css and webpack:assets to use my own loaders from webpack.conf.js.

Getting the same error with Mantra. “NPM is not defined” on the client side. I’m thinking if it’s somehow related to Meteor React version… :confused:

@benoitt When using webpack:webpack, ill files that are entry points and file imported as side effect of those entry points be ignored by Meteor 1.3’s modules system?

Have you tried updating webpack:webpack and webpack:react? I made a fix for this.

1 Like

With webpack:webpack there is a single entry point for client and a single one for server. The rest is ignored.

Thanks! Not yet using the update. :slightly_smiling:

+1 that would be awesome.

Just added TypeScript (ts and tsx) support and CoffeeScript. Now writing webpack:postcss :slight_smile: (it will override webpack:css anyways even if it is always bundled)

4 Likes

Just released webpack:postcss. Here is how you can do the exact same thing than your config:

meteor update webpack:webpack
meteor add webpack:postcss

Then add to your webpack.json file:

{
  "postcss": ["postcss-import", "postcss-cssnext", "postcss-at2x"]
}

It supports any PostCSS plugin you want as long as it is installed with NPM :slight_smile:

3 Likes

These postcss plugins are passed as name strings. Can we do something like this?

{
  "postcss": [autoprefixer({ browsers: [...] })]
}

Wow impressive :sunny:

1 Like

Yea I though about that too. Update your webpack:postcss plugin and you can set the option with an array like this:

{
  "postcss": [
    "postcss-import",
    ["autoprefixer", { "browser": "last 2 versions" }]
  ]
}

Hope that helps :slightly_smiling:

1 Like

@benoitt - to close the issue I had in production with react-helmet and no react-runtime dependency: it seems to be related to the Dedupe plugin from webpack. I tried disabling it in your webpack:webpack package and it now works as expected.

An issue on github mentions it: https://github.com/webpack/webpack/issues/959

@benoitt Thanks for wonderful work. You are solving a real problem. Please release it as a generalized npm package so that it can be used with any node application. Any plan for Webpack2?

Hey, @benoitt! Could you explain a bit, what are the benefits of using webpack with meteor 1.3 if I don’t use React?

Could you include kickstart-hugeapp with code splitting and SSR to your kickstart projects collection: https://github.com/thereactivestack/kickstart ?

Just added an option disableDedupePlugin to so you can disable it until they fix the bug. Most people shouldn’t use it but at least it’s there now if you need it.

Don’t spoil my secret project please… xD. I’ve literally started design phase on a new NPM package called webpacker that will allow you to have sophisticated builds with little to no configuration. Something that will spit out complex webpack.config.js files with a simple package.json and webpack.json file. Maybe even detect your loaders/plugins in your devDependencies and set some default configs. This would come with a middleware you can plug on any Node.js server so you don’t need to mess with a damn webpack-dev-server.

The complexity of Webpack seems to be a real pain for most people that would easily trade a little bit of flexibility (not that much) for A LOT of simplicity. Anyone that would like to discuss, give feedback or even contribute, send my an email to benoit@thereactivestack.com :slightly_smiling:

For Webpack 2, I’m waiting to learn more about it. There is some big things coming up that would REALLY help and I don’t see a lot of breaking changes. I’m certainly following this. If you have helpful links to learn more on that, let me know!

Meteor 1.3 brings you a lot of great things like real NPM support and ES2015 modules. However, Webpack brings way more. You can get hot moudle replacement with more than just React. You can get this working with any JavaScript library (I’m talking about that a little bit on my course on Meteor + Webpack on The Reactive Stack).

You can also bundle your assets with your code in a better way. As an example, you can import the CSS or images you need with your code and it will be automatically bundled with it. You don’t need to put everything in a dirty public folder ;).

You can also do code splitting. This means the code will not be loaded by the user until it hits the JavaScript code. This is useful for big applications or just if you want to hide the admin code form your regular users.

You can also do a bunch of stuff like TypeScript / CoffeeScipt or PostCSS/LESS/SASS. You can do that too with Meteor 1.3 but I feel like the integration is more fluent and easy with Webpack (maybe just my preference).

More and more people outside the React community are using Webpack because it is a great tool for ANY JavaScript developer.

You can learn about how to do code splitting on my course at The Reactive Stack. Because a project that do code splitting is not really different from a project without, I don’t feel like a kickstart is useful. I’m trying to do less kickstarters and more tutorials / examples. I feel like this is the way going forward.

4 Likes

Thanks @benoitt, you rock. Your meteor webpack package is the best thing that happened to meteor.

4 Likes

@dbismut I second that!

I propose @benoitt for Meteor man of the year :+1: :+1: :+1:

FINALLY !!! I could port neal-react sample to Meteor.
Here is for everyone who want it: https://github.com/bySabi/neal-sample-meteor

Could not be possible without @benoitt work.

Thanks man!

5 Likes

@benoitt I am sure webpacker will be a big hit. webpacker should also generate config for Angular2. Please check this link What’s new in webpack 2

1 Like