Building AngularJS and Vue.js into one application using webpack?

Question

This may seem a bit complicated and the answer is probably "don't do that, do this", so I'll start with the background of what I'm doing. Basically I have a legacy AngularJS application that we want to migrate from Vue to Vue. We didn't have the option of rewriting the application end-to-end and needed to do it piece by piece while still delivering a fully functional application.

So the overall goal is to have both frameworks running simultaneously, I'm hoping I can do something with routing or maybe split my single page app into two separate pages for different frameworks. I've switched angularjs from using gulp build pipeline to using webpack because I thought it was the logical first step to getting Vue running, but now I've hit a roadblock.

The webpack.config.js I use to build the angular application looks like this:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    target: 'web',
    // mode: "development",
    // devtool: "source-map",
    module: {
        rules: [

            {
                test: /\.html$/,
                loader: "html-loader",
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                  "style-loader",
                  "css-loader",
                  "sass-loader",
                ],
              },
              {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                  exposes: ["$", "jQuery"],
                },
              }
        ],
    },
    entry: {
        vendor: "./source/vendor.js",
        main: "./source/index.js",
    },
    optimization: {
        minimize: false
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'distribution'),
        clean:true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'source/index.html',
        })
    ]
};

Now works fine and I got something to add the ending which works like before.

Then I added a /source/vueJs directory and copied and pasted the contents of the vue create hello-world generated hello world project. My assumption is that if I can modify my webpack.config.js to build it, then I can iterate on it further to get to the point of merging two working apps together, but I'm already at Trying to get the hello-world vue project to produce anything.

So far I've basically commented out all the relevant angularJS parts and added what I think is the correct stuff to build the vue app, so now I have:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    target: 'web',
    mode: "development",
    devtool: "source-map",
    module: {
        rules: [

            // {
            //     test: /\.html$/,
            //     loader: "html-loader",
            // },
            // {
            //     test: /\.s[ac]ss$/i,
            //     use: [
            //       "style-loader",
            //       "css-loader",
            //       "sass-loader",
            //     ],
            //   },
            //   {
            //     test: require.resolve("jquery"),
            //     loader: "expose-loader",
            //     options: {
            //       exposes: ["$", "jQuery"],
            //     },
            //   },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                  },
                ],
              },
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              // this will apply to both plain `.js` files
              // AND `<script>` blocks in `.vue` files
              {
                test: /\.js$/,
                loader: 'babel-loader'
              },
              // this will apply to both plain `.css` files
              // AND `<style>` blocks in `.vue` files
              {
                test: /\.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader'
                ]
              }
        ],
    },
    entry: {
        // vendor: "./source/vendor.js",
        // angular: "./source/index.js",
        vue: "./source/vueJs/index.js"
    },
    optimization: {
        minimize: false
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'distribution'),
        clean:true
    },
    plugins: [
        new HtmlWebpackPlugin({
            //template: 'source/index.html',
        }),
        new VueLoaderPlugin()
    ],
};

This works fine, I get a distribution/ directory with my assets in it, but the served site behaves as if no JavaScript is running at all. Comparing the output of npx webpack on my version with the output of npx vue-cli-service build on the hello-world project, the javascript is similar, but different in a number of key areas, one At first it seemed like my version did not have any HTML embedded like the hello world project did.

Will trying to compile a vue application from webpack fail? You can only do this using vue-cli-service build, so is it limited to vue? I tried modifying my vue.config.js using the information found at https://cli.vuejs.org/guide/webpack.html and https://cli.vuejs.org/config/ but frankly, I Feel like I'm out of my current depth and not sure if what I'm doing is a good idea.

Is there a better strategy to achieve my end goal? If this is a viable solution, what configuration changes do I need to make to properly build the angularjs and vue applications?

Answer 1

I can’t see the forest for the trees. The problem isn't that webpack.config.js doesn't successfully generate a working Angular and Vue combo app, the problem is that I don't provide the actual templates used by any of them, so it just generates A blank index.html with the supplied script but no content in the body.

Change

new HtmlWebpackPlugin({
        //template: 'source/index.html',
    }),

In my question, I had a template that used both AnularJS components and Vue components that worked just fine.