Using ember with webpack
For this post I will assume that you already use ember and want to integrate webpack. This isn’t a tutorial about webpack or ember.
I know ember has ember-cli (a command utility with a complete asset pipeline, strong project structure and an addon system), so why anyone would mind fighting all the way to webpack? Well, we can say that in the ember world not all projects are greenfield and the migration path to ember-cli can be quite steep.
Yes, this is about a migration path. A little bit of context, currently I'm working on a project that achieved all steps from a "let's grow" list. It started as a Rails monolith app, it migrated to a micro-services world and it replaced the Rails Views with something more ambitious™, in this case, ember. The migration happened when ember was in version 1.8.x and the original developers decided to use ember-rails to smooth the transition.
- Make ember work with webpack
- Migrate the code to webpack
- Create a Rack middleware to, in development, forward asset requests to webpack
- Convert everything to ES2015+ and enforce more conventions while we migrate the code
- Migrate a more compatible code to ember-cli
Ember + webpack
During my research time, I found a nice thread on the ember forum about the subject and started my work from the solutions in the thread. Ember is compatible with webpack, we just need to provide a solution for some things:
- NPM package for Ember
- Load HTMLbars templates correctly
- Look up the framework modules (controllers, routes, components, etc) following ember conventions
1) NPM Package
Ember is not in NPM (yet, I hope soon) but we can use the build created for Bower by using the tarball. We don't want to use bower.
$ npm install — save https://github.com/components/ember/tarball/2.2.0
This will download jQuery as well since it's a dependency of Ember. To complete the installation we need to create some shims and aliases to easily load Ember. Let’s see how it would be using three files: jquery.js, ember.js and the alias config in webpack.config.js.
After this configuration, we can import ember like a regular library.
2) Load HTMLbars templates
The thread pointed me to a NPM module called ember-templates-loader which was supporting only ember 1.13.x, to be more future proof I switched this package with ember-cli-htmlbars , which is an official package in ember world. I just pointed the template compiler to my current template compiler to align the version being used.
3) Look up framework modules
I have created a package with the HTMLbars loader and some others to ease the integration. The package is called ember-webpack-loaders and can be found on NPM.
The package provides three loaders: one for HTLMbars; one for the template loading in ember (one thing is to precompile templates another is to load it in ember); and another one for loading framework specific modules (controllers, services, mixins, routes, etc) following ember conventions. I ended up with the following configuration in webpack:
Resuming the app structure:
Where app can be any folder you want, just configure the name in the loaders and if you decide to use something different than index.js inside app just remember to change the reference in the loader as well.
I have created a more elaborated TodoMVC app using this structure, I did it to push more from this integration, the original version was too simple and didn't cover things like helpers, components or services. You can check the demo at http://tulios.github.io/ember-webpack-example/ and you have the code in github, fell free to fork the project or suggest modifications.