CODEWITHSUNDEEP
webpackgulpgulp-injectwiredep
gnom_7
gnom_7

Reputation: 121

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?

Upvotes: 1

Views: 509

Answers (2)

gnom_7
gnom_7

Reputation: 121

Finally I ended up with webpack-concat-plugin, it allows you to concatenate js dependencies from bower_component (not only) libraries into one bundle, then optionally minify it and inject into the index.html (with html-webpack-plugin), so it allowed me to create very similar setup as project had with gulp. The only thing is that now I should explicitly specify all js files from bower_components I wish to have in the bundle while wiredep did it automatically. This one plugin solved whole issue:

new ConcatPlugin({
  uglify: true, // actually it is just a minifier
  sourceMap: false,
  name: 'bower.bundle',
  outputPath: 'vendor',
  fileName: '[name].js',
  filesToConcat: [
    "@bower_components/jquery/jquery.min.js",
    ...
  ],
  attributes: {
    async: false // file order is preserved same as in 'filesToConcat'
  }

Upvotes: 0

Roy Scheffers
Roy Scheffers

Reputation: 3908

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.

Upvotes: 1

Related Questions