How to migrate from Grunt to Webpack

Hi all,
in this post I’d like to discuss how we can migrate from Grunt to Webpack.

We have a lot of custom tasks for Grunt and rewriting them to Webpack will take some time. Fortunately we can use Webpack in Grunt just for the build and leave all of the custom tasks for now. We can use grunt-webpack - npm for this.
We have a custom task for the build, which copies and bundles all of the css and js files manually, Webpack will do this automatically, but this will require some changes in all of the modules, e.g. we will have to add single entry point for all of the modules.
We can just create a js file in every module and import all javascript and css files from this module in it. We will also need to add all of the yarn dependencies here. Then in the dev-ui we will need to generate a file that imports entry point of every module required and use it in Webpack.
We will also need to change the way html templates are imported, right now it’s just a string in the templateUrl, it will need to use import/require or we can try to use https://www.npmjs.com/package/angularjs-template-loader instead, to make the change automatically.

If you have any questions, please let me know.

Best Regards,
Paweł

Thanks @pmuchowski ,

Were you able to get a proof of concept for our project going?

I did not created a proof of concept, I’m not sure how I could do it without completing the migration.

I prepared a list of steps for the migration:
Changes in every module:

  • create a js file and import there all of the files that should be included in the build (js, css and external dependencies)

Changes in dev-ui:

  • add grunt-webpack, webpack and its modules to package.json devDependencies
  • create webpack config
  • add webpack config and grunt-webpack task to Grunt config (it’s described in https://www.npmjs.com/package/grunt-webpack)
  • add a task to create a single entry point for webpack, a js file that imports entry points (the js file with imports created in each module) from all of the modules
  • remove custom tasks created to bundle css, js and html files (this will be handled by webpack loaders)
  • rewrite build taks to use webpack instead of the custom tasks