Webpack build for exisitng AngularJS project

Question

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

user_4019404 · Answer

You can try something like this (we use it for running tests):

bundle.js:

        const jsConext= require.context('.', true, /\.js/);
        ng1Context.keys().forEach(ng1Context);
        const cssConext= require.context('.', true, /\.css/);
        ng1Context.keys().forEach(ng1Context);
...
 entry: { 'app-portal': 'bundle.js' }

This should work in general (You might need fix order for css or in case of multiple angular modules etc.)

Webpack build for exisitng AngularJS project

1 Answers