使用 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 组件的模板工作得很好。