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
