I have a two-year-old AngularJs 1.x project, which is built with Gulp for development and Grunt for production (don't ask me why; I don't know either).

The build process is basically:

1. Compile all scss files into one css file

2. Merge all JS files into one JS file. We are not using any import mechanism. Each file is basically one of AngularJs' controller, ponent, service or filter. Something like this:

   angular.module("myApp").controller("myCtrl", function() {//...});
   

3. Merge all html templates into one JS file. Each template is hardcoded with $templateCache.

4. Moving assets like images and fonts into the build folder.

5. Moving third-party libraries into the build folder.

Now I want to switch to webpack for this project. I want to incrementally modernize this project, but the first step would be just building it with webpack with a similar process like the above. I would like to keep the code base as much the same as possible. I don't want to add import for all the JS files yet. There are too many. I would also like to add a babel-loader.

I have some basic concepts about webpack, but never really customized the configuration myself.

Would anyone please give me some pointers? Like which loaders/plugins would I need, etc.? Thanks!

I have a two-year-old AngularJs 1.x project, which is built with Gulp for development and Grunt for production (don't ask me why; I don't know either).

The build process is basically:

1. Compile all scss files into one css file

2. Merge all JS files into one JS file. We are not using any import mechanism. Each file is basically one of AngularJs' controller, ponent, service or filter. Something like this:

   angular.module("myApp").controller("myCtrl", function() {//...});
   

3. Merge all html templates into one JS file. Each template is hardcoded with $templateCache.

4. Moving assets like images and fonts into the build folder.

5. Moving third-party libraries into the build folder.

Now I want to switch to webpack for this project. I want to incrementally modernize this project, but the first step would be just building it with webpack with a similar process like the above. I would like to keep the code base as much the same as possible. I don't want to add import for all the JS files yet. There are too many. I would also like to add a babel-loader.

I have some basic concepts about webpack, but never really customized the configuration myself.

Would anyone please give me some pointers? Like which loaders/plugins would I need, etc.? Thanks!

• javascript
• angularjs
• webpack

• 2 medium./eventmobi/… – 31piy Commented Apr 29, 2018 at 6:20

1 Answer 1

My process to do such a transition was gradual, I had a similar Grunt configuration.

These are my notes & steps in-order to transition to Webpack stack.

The longest step was to refactor the code so it will use ES6 imports/exports (yeah, I know you have said that it is not a phase that you wanna make, but it is important to avoid hacks).

At the end each file looks like that:

//my-ponent.js

class MyComponentController { ... }

export const MyComponent = {
    bindings: {...},
    controller: MyComponentController, 
    template: `...`
}

//main.js

import {MyComponent} from 'my-ponent'
angular.module('my-module').ponent('myComponent', MyComponent);

In order not going over all the files and change them, we renamed all js files and added a suffix of .not_module.js. Those files were the old untouched files.

We added grunt-webpack as a step to the old build system (based on Grunt). It processed via Webpack all the new files (those that are without .not_module.js suffix). That step produced only one bundle that contains all the files there were converted already, that file we have added to concat step.

One by one, each converted file gradually moved from being processed by Grunt tasks to be processed by Webpack.

You can take as a reference that webpack.config.

Good luck.