Webpack build for exisitng AngularJS project

I am looking to migrate the existing Ruby based build system in our AngularJS(1.4.X) project to Webpack. The project code is not using JS modules and being with old-school Angular code patter I am not sure how Webpack will find all the controller and factory files in the project.

Folder structure is like,

-app     - assets         - javascripts             - ctrl                 - controllerA.js                 - controllerB.js             -services                 -serviceA.js                 -serviceB.js             - angular.min.js             - angular-route.js             - main.js  

Wen I use the main.js in my entry point it get copied into the build folder but none of the other files as processed by Webpack even if I use babel-loader to .js rule.

One option I can think of is to use all other files into a separate bundle file using something like https://www.npmjs.com/package/webpack-merge-and-include-globally, but I want to know whether there is a better way of doing it.

My current webpack config is as below.

module.exports = {      context: __dirname +'/app',      entry: {          'app-portal': [              '/assets/javascripts/main.js',              '/assets/javascripts/angular.min.js',              '/assets/stylesheets/portal/style.css',              '/assets/stylesheets/portal/navbar.css',              '/assets/stylesheets/portal/animation.css',              '/assets/stylesheets/portal/bootstrap.min.css',              '/assets/stylesheets/portal/bootstrap-notify.css',              '/assets/stylesheets/portal/fontello.css',          ]      },      output: {          path: __dirname + "/dist/assets",      },      module: {          rules: [              {                  test: /\.js$/,                  exclude: /(node_modules)/,                  use: {                      loader: 'babel-loader',                  },              },              {                  test: /\.css$/,                  use: [                      MiniCssExtractPlugin.loader,                       {                           loader:'css-loader',                           options: {                               sourceMap: true,                              url: false,                          },                      },                  ],              },   plugins: [      new CleanWebpackPlugin(),      new HtmlWebpackPlugin({        template: './views/portal/index.html',        filename: '../index.html',      }),      new MiniCssExtractPlugin({          filename: './[name].css',          linkType: false,          ignoreOrder: false,       }),      new CopyPlugin({          patterns: [              {                  from: './views/portal/**/*.*',                  to: "../[name].[ext]",                  globOptions: {                      ignore: [                          '**/index.*',                      ],                  },                },              {                  from: './assets/fonts/*.*',                  to: "./[name].[ext]",              },              {                  from: './assets/images/portal/*.*',                  to: "./[name].[ext]",              },              {                  from: './assets/theme/*.*',                  to: "./[name].[ext]",              }                         ]      }),   ],  

Probably Webpack is not the right solution for me as I don;t want to change the source code as suggested in Webpack plugins and/or strategies for AngularJS

https://stackoverflow.com/questions/65420293/webpack-build-for-exisitng-angularjs-project December 23, 2020 at 03:08PM