Webpack compiler inside Meteor (ES6 modules, hot reload and code splitting!)

announce
41

Hey this is pretty nice!! Feels like a built in feature! I wouldn’t be surprised if MDG forks this :wink:

I don’t have a chance to drop in my current project to see if I can find any limitations but as long is there is somewhere to opt into complexity when needed.

In general i’m a big fan of simple by default, opt into complexity :thumbsup:

4 Likes
42

You are one step away from making this work. I will add a note on the readme but here is what you need to do.

If you are under Windows, the node_modules symbolic link on the root folder will not work. To make that work, you need to remove it and create a Windows symbolic link. Here is the command:

  1. Go in the root folder of your Meteor project
  2. Remove the node_modules unix symbolic link
  3. MKLINK /D node_modules packages\npm-container\.npm\package\node_modules

@manuel can you let me know if it works? I’ll add it to the readme.

43

@benoitt how did you get it to run the Webpack compiler on Meteor startup if the webpack.conf.js file was already “built”? When I tried to make a similar plugin, isobuild wouldn’t run my build plugin on the file if it hadn’t changed since last time it ran the build plugin (it assumes using the previous output of the plugin is the right thing to do), so it would never end up starting the webpack --watch or webpack-dev-server until I edited the file.

44

I think you can import in es6 module without a variable.

for ex:

import ‘./style.css’;
import ‘./methods.js’;
…

45

Yes, though I don’t think that would prevent Meteor from loading the css files

46

Looks like css file handling by Meteor can’t be prevented completely - The sample apps of this project use *.import.css ending for css. So I think es6 style import of *.import.css files should be possible.

47

Idk what I’m doing wrong, but hmr is not working nor meteor’s default reloader but the message Client modified -- refreshing appears on console.
What I also noticed is that webpack default message is being supressed?

=> Started your app.

=> App running at: http://localhost:3000/
webpack building...
webpack built b1d81b645d9317c30e22 in 696ms
=> Client modified -- refreshing
48

Those messages are normal. The client modified – refreshing is blocked because you have HMR. It means it doesn’t need to browser to reload the page. Go look at your browser console. You will see what’s going on and if your config is correct, you will see your page updated.

49

Ok, gonna try to debug it. Thanks

50

And how can I see the sourcemaps? It is showing me this:

1088×387 75.2 KB

51

Add the following line to your client webpack config:

// client/webpack.conf.js
...
module.exports = {
  entry: './entry',
  devtool: 'cheap-module-eval-source-map', // Add this
  externals: {
   ....

This should fix sourcemaps for you.

What you see are simple, fast, readable sourcemaps generated by the cheap-eval-source-map devtool. Unfortunately line numbers are wrong and you see the transpiled JS instead of the original code.
I’ll do a pull request to get better sourcemaps by default.

1 Like
52

This is great. I think MDG is moving in the direction to adopt Webpack. The sooner we can have the most amount of weight behind this the better, and if MDG can jump on board on getting this as the official system then the better off we’ll be as a community.

2 Likes
53

Wow, amazing work @benoitt! I’ll definitely try this out for SpaceDrop http://spacedropcms.org

54

Though it would be even cooler if we could remove the packages.json and keep all of that inside the required packages. So that it looks more like a clean meteor project. :smile:

1 Like
55

@timbrandin, yeh, .meteor/packages could look something like this:

meteor-base
accounts-ui
reactive-var

npm:moment
npm:react-router
npm:radium
1 Like
56

I’m not sure I want to replicate NPM modules inside Atmosphere. I think it would be pretty painful just to get them all up-to-date.

57

UPDATE

  • common chunk is not added anymore by default (see kickstart-hugeapp for how)
  • you can use a common webpack.conf.js in your project folder (or anywhere available on both client/server). They will be merged.
  • you can add devServer (see kickstart-simple webpack.conf.js) to change by your local IP address
  • fixed a few bugs with NPM and source maps

More to more in the next few days :smile:

10 Likes
58

UPDATE #2
I’ve also refactored the folders. I think it makes more sense to split your app like smart packages (but without them ;))

1 Like
59

The app works but it doesn’t reload on changes. It doesn’t even show the changes when I refresh the page. To see changes I have to restart meteor.

60

I’ll investigate that. It seems to be a problem with Webpack file watcher on Windows

1 Like