Construire AngularJS et Vue.js dans une seule application à l'aide de Webpack ?

Question

Cela peut sembler un peu compliqué et la réponse est probablement « ne fais pas ça, fais ceci », je vais donc commencer par le contexte de ce que je fais. Fondamentalement, j'ai une ancienne application AngularJS que nous souhaitons migrer de Vue vers Vue. Nous n'avions pas la possibilité de réécrire l'application de bout en bout et devions le faire pièce par pièce tout en fournissant une application entièrement fonctionnelle.

L'objectif global est donc de faire fonctionner les deux frameworks simultanément. J'espère pouvoir faire quelque chose avec le routage ou peut-être diviser mon application d'une seule page en deux pages distinctes pour différents frameworks. J'ai converti Angularjs de l'utilisation du pipeline de construction gulp à l'utilisation de webpack parce que je pensais que c'était la première étape logique pour faire fonctionner Vue, mais maintenant je me suis heurté à un barrage routier.

Le webpack.config.js que j'utilise pour créer mon application angulaire ressemble à ceci :

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',
        })
    ]
};

Fonctionne bien maintenant, j'ai quelque chose à ajouter à la fin qui fonctionne comme avant.

Ensuite, j'ai ajouté un répertoire /source/vueJs et copié et collé le contenu du projet hello world généré par vue create hello-world. Mon hypothèse est que si je peux modifier mon /source/vueJs 目录，并复制并粘贴了 vue create hello-world 生成的内容 hello world 项目。我的假设是，如果我可以修改我的 webpack.config.js pour le construire, alors je peux le parcourir davantage pour arriver au point de fusionner deux applications fonctionnelles ensemble, mais j'ai déjà du mal à faire en sorte que le projet hello-world vue produise quoi que ce soit. chose.

Jusqu'à présent, j'ai essentiellement commenté toutes les parties angulairesJS pertinentes et ajouté ce que je pense être correct pour créer l'application vue, alors maintenant j'ai :

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()
    ],
};

Cela fonctionne bien, j'obtiens une sortie distribution/ 目录，其中包含我的资产，但是所提供的站点运行起来就像根本没有运行 JavaScript 一样。比较我的版本上 npx webpack 的输出和 hello-world 项目上 npx vue-cli-service build, le javascript est similaire mais différent dans de nombreux domaines clés, au début, il semblait que ma version n'avait pas de HTML intégré comme le projet hello world.

Est-ce que la tentative de compilation d'une application vue à partir de webpack échouera ? Vous ne pouvez faire cela qu'en utilisant vue-cli-service build donc c'est limité à vue ? J'ai essayé de modifier mon vue.config.js en utilisant les informations trouvées sur https://cli.vuejs.org/guide/webpack.html et https://cli.vuejs.org/config/ mais franchement, j'ai l'impression de Je suis hors de ma profondeur actuelle et je ne sais pas si ce que je fais est une bonne idée.

Existe-t-il une meilleure stratégie pour atteindre mon objectif final ? S'il s'agit d'une solution viable, quelles modifications de configuration dois-je apporter pour créer correctement les applications angulaires et vue ?

Answer 1

Je ne peux pas voir la forêt à cause des arbres. Le problème ne vient pas de webpack.config.js 没有成功生成工作的 Angular 和 Vue 组合应用程序，问题在于我没有提供实际使用的模板 其中任何一个，因此它只会生成一个空白的 index.html , qui contient le script fourni mais aucun contenu dans le corps.

Changement

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

Dans ma question, j'avais un modèle utilisant à la fois des composants AnularJS et des composants Vue qui fonctionnaient très bien.