使用 webpack 將 AngularJS 和 Vue.js 建置到一個應用程式中？

Question

這可能看起來有點複雜，答案可能是“不要那樣做，這樣做”，所以我將從我正在做的事情的背景開始。基本上我有一個遺留的 AngularJS 應用程序，我們希望將其從 Vue 遷移到 Vue。我們無法選擇端到端重寫應用程序，並且需要一點一點地進行，同時仍然提供功能齊全的應用程式。

因此，總體目標是讓兩個框架同時運行，我希望我可以對路由做一些事情，或者可能將我的單頁面應用程式分成兩個單獨的頁面以用於不同的框架。我已經將 angularjs 從使用 gulp 建置管道轉換為使用 webpack，因為我認為這是讓 Vue 運行的邏輯第一步，但現在我遇到了障礙。

我用來建立角度應用程式的 webpack.config.js 如下所示：

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

現在工作正常，我得到了一些東西，添加了像以前一樣工作的結尾。

然後我新增了一個 /source/vueJs 目錄，並複製並貼上了 vue create hello-world 產生的內容 hello world 專案。我的假設是，如果我可以修改我的webpack.config.js 來建立它，然後我可以進一步迭代它以達到將兩個工作應用程式合併在一起的程度，但我已經在努力獲得hello-world vue 專案可以生產任何東西。

到目前為止，我基本上註釋掉了所有相關的 angularJS 部分，並添加了我認為正確的內容來構建 vue 應用程序，所以現在我有了：

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

這運作正常，我得到一個 distribution/ 目錄，其中包含我的資產，但是所提供的網站運行起來就像根本沒有運行 JavaScript 一樣。比較我的版本上npx webpack 的輸出和hello-world 專案上npx vue-cli-service build 的輸出，javascript 類似，但在很多關鍵領域有所不同，一開始似乎我的版本確實如此沒有像hello world 專案那樣嵌入任何HTML。

嘗試從 webpack 編譯 vue 應用程式會失敗嗎？你只能使用 vue-cli-service build 來做到這一點，因此僅限於 vue 嗎？我嘗試使用https://cli.vuejs.org/guide/webpack.html 和https://cli.vuejs.org/config/ 中找到的資訊來修改我的vue.config.js，但坦白說，我覺得我出局了我目前的深度，不確定我正在做的事情是否是一個好主意。

是否有更好的策略可以實現我的最終目標？如果這是一個可行的解決方案，我需要更改哪些配置才能正確建立 angularjs 和 vue 應用程式？

Answer 1

我只見樹木不見森林。問題不在於webpack.config.js 沒有成功生成工作的Angular 和Vue 組合應用程序，問題在於我沒有提供實際使用的模板 其中任何一個，因此它只會生成一個空白的index.html ，其中包含提供的腳本，但正文中沒有內容。

改變

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

在我的問題中，有一個同時使用 AnularJS 元件和 Vue 元件的模板運作得很好。