Meteor with Webpack — Faster compilation and better source handling
Tags: meteor, webpack
Published: 2021-07-29 09:55:20

> This article was published on Friday, July 13, 2018 by [Arda Tanrikulu](https://twitter.com/ardatanrikulu) @ [The Guild Blog](https://the-guild.dev/)

## Introduction to Meteor-Webpack

[Meteor](https://meteor.com) is a complete full stack framework for fast-start on your real-time web
application. I don't focus on that for now.

![](https://the-guild.dev/medium/771a9c467ce313c5ab1fffb433a6686e.png)

[Webpack](https://webpack.js.org) is a great bundler to compile your code including view templates,
assets and the all stuff on your application.

However, Meteor already has its own built-in bundler; but it needs some challenging tricks when
you're working with ES2015 external npm dependencies or any compilation methods.

Meteor-Webpack is here as a solution to this kind of problems and lack of features in Meteor's
bundler.

## Why Do You Need This?

For example, you have a Progressive Web Application using Service Workers, written in Angular, then
you have to create a service worker manifest based on your output files. We don't have a solution
for this on Meteor CLI natively. However, Webpack has a lot of community plugins such as
[`OfflinePlugin`](https://github.com/NekR/offline-plugin) ,
[`Workbox`](https://developers.google.com/web/tools/workbox/guides/codelabs/webpack) and many others
for this problem as a solution. Just install them, and add to your
[`webpack.config.js`](https://webpack.js.org/configuration) . Meteor-Webpack will handle it like
you're working on a pure Webpack project.

Other example is server-side rendering. [Angular CLI](https://cli.angular.io) is based on Webpack,
and the project can be compiled for SSR by Angular CLI; but you need a different server application
to serve your Angular Universal application separate from Meteor backend. By using Meteor-Webpack,
it is possible only by ejecting Angular CLI's `webpack.config.js` , and use it on Meteor project.

## Hot Module Replacement, Even for Server (Beta)

![HMR hot module replacement](https://the-guild.dev/medium/274cf118280e652e8e0f63c442c59d9b.png "Hot Module Replacement")

Reloading on recompilation while developing your app may take a lot of time. HMR comes to save us
from this time loss on development. If you don't know, what HMR is. You can
[check out Webpack's documentation.](https://webpack.js.org/concepts/hot-module-replacement)

Meteor-Webpack integrates
[`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware) and
[`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware) to benefit HMR
in your project. The only thing you have to do is enabling this feature just like any other Webpack
project;

```
...
devServer: {
  hot: true
}
...
```

Also, you can use HMR for server side. Meteor-Webpack supports
[`webpack-hot-server-middleware`](https://github.com/60frames/webpack-hot-server-middleware) , that
replaces changed modules on your server without restarting all Meteor server. This also provides a
lot of benefits on development.

## More Examples

There are more examples in the repository;
[https://github.com/ardatan/meteor-webpack](https://github.com/ardatan/meteor-webpack)