Using Webpack with Middleman

#1

I recently upgraded https://rossta.net from Middleman v3 to v4 and I needed to replace my Sprockets integration with something else that turned out to be Webpack. I wrote about how I set up Middleman to work with Webpack. Interested to hear your questions, comments, and feedback.

1 Like
#2

Thanks for the article. Any chance you could add an example configuration for compiling coffeescript?

Also, repeated build_development twice here:

I tell Webpack to make the DEVELOPMENT and PRODUCTION variables available based on the presence on the BUILD_DEVELOPMENT and BUILD_DEVELOPMENT environment variables.

And lastly, is the asset pipeline not available in middleman 4 anymore? Even as an option?

#3

Thanks for the edit!

I’m not using CoffeeScript, but here’s a link to a Webpack loader that may work: https://github.com/webpack/coffee-loader. The sample config in the coffee-loader README would replace the babel-loader in my Webpack configuration if I were going to use it.

The asset pipeline is completely removed from Middleman v4. You can still use it with Middleman < 4. However, @middlemanapp tweeted at me in response to my article recently to say the community may be stepping up to support it, possibly as an extension. Perhaps others in the forum know more.

#4

Hiya

Great article - would be great to copy some of this into the official documentation or at least provide a link there. Maybe Thomas will accept a pull request with that?

Why did you feel you needed to replace the sprockets integration? Was it just the speed factor? I noticed recently that the maintainer of middleman sprockets has worked hard on the speed and I still maintain v4 with sprockets and its okay. But will be testing your article out also on the next project.

Many thanks

Ian

#5

Thanks! Here are some reasons why I switched:

  • When I started upgrading late last year, the recent efforts to improve middleman-sprockets hadn’t yet begun; FWIW, I think that effort is really important to the whole Middleman community and will help many folks “survive” the upgrade without switching to some other tool.
  • While I think Sprockets filled an important need when it was introduced, it lags behind other tools, not just in performance, but in terms of features offered, flexibility
  • Learning something like Webpack/Grunt/Gulp etc is more transferrable since a wide range of backend and static frameworks (in other languages too) work well with external tools; Sprockets is typically only useful in Ruby projects

Perhaps the reason I switched can best be summarized as “future proofing”, though I’m aware there’s really no such thing.

1 Like
#6

@iwarner, is there an example of using sprockets with middleman 4?

#7

Thank you! I will take a look at coffee-loader.

#8

Here is my config.rb

#9

Great Article!

I was already using Gulp Starter for compilation (which contains Webpack) but I decided to see if I could get it to work with Middleman v4 as I was also having issues with Sprockets.

I made a screencast of how to do it: https://www.youtube.com/watch?v=-io8EeB3GHI
And I put it all in a repo (with some big updates since the screencast).

Hopefully this is of some use to someone as well.

#10

For others who, like me, were looking for the repo:

1 Like
#11

If anyone is interested in using Webpack 2, I posted a guide here, loosely based on @rossta’s origional post.