Search code examples
backbone.jsrefactoringwebpack

Refactoring with webpack


I'm trying to use webpack to refactor a backbone application that uses no modularization at all. All the models and the views are added through script tags to index.html and are globally available. I have read a couple of tutorials about refactoring with webpack but they only seem to take into consideration the use of webpack on applications that already use modules. Do you know if there's a way of adding webpack to an app like mine without having to refactor every single js file? Thanks


Solution

  • You will have to modify each of your js files some, but Webpack will automatically treat each file as a module for you (similar to wrapping every file in an IIFE http://benalman.com/news/2010/11/immediately-invoked-function-expression/).

    What you have to do is define which modules have dependencies on other modules. Module's that have dependencies need to define those. Webpack supports many module syntax's, and comes with Commonjs and AMD out of the box. Commonjs is the recommended syntax for webpack. The best place to start is probably this guide: https://github.com/petehunt/webpack-howto