webpackgulpgulp-injectwiredep

migration from gulp, wiredep, gulp-inject and globs to webpack and ES6 modules


I have a legacy project and would like to move it from gulp to webpack. Project uses wiredep with gulp-inject plugin, so all code relies on globals and there are no imports of CommonJS/AMD/ES6 modules. But as I understand webpack builds bundle by resolving dependency graph based on module imports. Is it possible to migrate such a project to webpack and then gradually update code to use ES6 imports and remove globals? Does webpack has something similar to wiredep? What approach can you suggest to gradually migrate project to ES6 modules?


Solution

  • Having no experience with wiredep or gulp-inject plugin other then reading up on what both libraries do, the following might be able to help you in your understanding to migrate and which plugins you can use.

    Webpack Expose Loader

    The expose loader webpack plugin allows you to add libraries to the global namespace. In this way other parts of your code that need it will be able to have access to it.

    Gulp Inject Webpack Plugin

    I'll let the docs speak for itself.

    Gulp has an excellect HTML composer called Gulp Inject. It has a lot of powerful features.

    If you have existing projects that you are migrating to Webpack it is desirable for these features to work immediately, with the Webpack CLI.

    This plugin wraps Gulp Inject so that you can use it without running Gulp. It has a dependency on the Vinyl File System used in Gulp but not on Gulp itself.

    By combining these two plugins, you should be able to migrate over to Webpack without adjusting the entire structure of your app.

    I hope this helps.