Membina AngularJS dan Vue.js menjadi satu aplikasi menggunakan webpack?

Question

Ini mungkin kelihatan agak rumit dan jawapannya mungkin "jangan buat itu, buat ini", jadi saya akan mulakan dengan latar belakang apa yang saya lakukan. Pada asasnya saya mempunyai aplikasi AngularJS warisan yang ingin kami pindahkan dari Vue ke Vue. Kami tidak mempunyai pilihan untuk menulis semula aplikasi dari hujung ke hujung dan perlu melakukannya sekeping demi sekeping sambil masih menyampaikan aplikasi berfungsi sepenuhnya.

Jadi matlamat keseluruhannya adalah untuk membolehkan kedua-dua rangka kerja berjalan serentak, saya berharap saya boleh melakukan sesuatu dengan penghalaan atau mungkin membahagikan apl halaman tunggal saya kepada dua halaman berasingan untuk rangka kerja yang berbeza. Saya telah menukar angularjs daripada menggunakan saluran paip bina gulp kepada menggunakan pek web kerana saya fikir ia adalah langkah pertama yang logik untuk menjalankan Vue, tetapi kini saya telah mengalami sekatan jalan.

webpack.config.js yang saya gunakan untuk membina apl sudut saya kelihatan seperti ini:

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

Sekarang ia berfungsi dengan baik dan saya mendapat sesuatu untuk menambah pengakhiran yang berfungsi seperti dahulu.

Kemudian saya menambah direktori /source/vueJs dan menyalin serta menampal kandungan projek hello world yang dijana vue create hello-world. Hipotesis saya ialah jika saya boleh mengubah suai /source/vueJs 目录，并复制并粘贴了 vue create hello-world 生成的内容 hello world 项目。我的假设是，如果我可以修改我的 webpack.config.js saya untuk membinanya, saya kemudian boleh mengulanginya lagi untuk sampai ke tahap menggabungkan dua apl yang berfungsi bersama, tetapi saya sudah bergelut untuk mendapatkan projek hello-world vue untuk menghasilkan apa sahaja benda.

Setakat ini saya pada dasarnya telah mengulas semua bahagian angularJS yang berkaitan dan menambah perkara yang saya fikir betul untuk membina aplikasi vue, jadi sekarang saya mempunyai:

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

Ini berfungsi dengan baik, saya mendapat output distribution/ 目录，其中包含我的资产，但是所提供的站点运行起来就像根本没有运行 JavaScript 一样。比较我的版本上 npx webpack 的输出和 hello-world 项目上 npx vue-cli-service build, javascriptnya serupa tetapi berbeza dalam banyak bidang utama, pada mulanya nampaknya versi saya tidak mempunyai sebarang HTML yang dibenamkan seperti projek hello world.

Adakah percubaan untuk menyusun apl vue daripada webpack akan gagal? Anda hanya boleh melakukan ini menggunakan vue-cli-service build jadi ia terhad kepada vue? Saya cuba mengubah suai vue.config.js saya menggunakan maklumat yang terdapat di https://cli.vuejs.org/guide/webpack.html dan https://cli.vuejs.org/config/ tetapi terus terang, Saya Rasa seperti saya' saya keluar dari kedalaman semasa saya dan tidak pasti sama ada apa yang saya lakukan adalah idea yang baik.

Adakah terdapat strategi yang lebih baik untuk mencapai matlamat akhir saya? Jika ini adalah penyelesaian yang berdaya maju, apakah perubahan konfigurasi yang perlu saya lakukan untuk membina apl angularjs dan vue dengan betul?

Answer 1

Saya tidak dapat melihat hutan untuk pokok. Masalahnya bukan dengan webpack.config.js 没有成功生成工作的 Angular 和 Vue 组合应用程序，问题在于我没有提供实际使用的模板 其中任何一个，因此它只会生成一个空白的 index.html , yang mengandungi skrip yang disediakan tetapi tiada kandungan dalam badan.

Ubah

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

Dalam soalan saya, saya mempunyai templat menggunakan kedua-dua komponen AnularJS dan komponen Vue yang berfungsi dengan baik.