Vue3+webpack实现组件远程加载（转）最近接到了一个运营需求在页面中植入不同的活动弹窗还需要经常替换本来思

个人实测

个人亲测，代码无问题，顺着md文件执行下去。就可以实现，原理非常简单。非常棒的方式。

以下为转载的正文：

最近接到了一个运营需求在页面中植入不同的活动弹窗还需要经常替换本来思考的方案是写在本地每次有新活动再发版但是这种方案有一个问题就是对于单页应用来说如果用户不重新进入页面或者刷新页面是无法重新向服务器请求资源的而产品的意思是只要广告发布后用户进入页面就需要展示最新的活动内容以后还有可能展示随机活动并有可能频繁替换 so 经过研究我们实现了一种远程加载资源的方式可以完美的实现运营需求那么我们是怎么实现的呢?且听我慢慢道来

纠结之路

首先我和另一位开发小伙伴的思路出现了巨大分歧他的思路是做一个lowcode的简单搭建平台然后通过约定的JSON Schema的格式定义组件内容去渲染这也是大部分lowcode平台的做法
我强烈反对的原因是因为我们的页面可能会有复杂的交互逻辑 lowcode平台无法实现太过于复杂的逻辑内容于是这个方案被pass 我提出了另一个方案就是通过使用带compiler的vue runtime来实现对template的加载类似于这种形式

经过一番实验我们发现这个方案也有很多用着不太爽的地方比如字符串形式的template和只能使用行内样式这让我俩感觉后边的维护之路边的异常艰难所以我们又想到了另一个方案那就是能不能直接使用.vue的sfc文件去加载呢?但是浏览器是无法识别和加载.vue文件的那么我们可不可以通过webpack直接把组件打包成一个js文件加载到页面里呢?于是我们开始了探究之路
首先我们查看了vite和webpack两个方案的实现可能性 vite是基于rollup实现我们使用rollup进行了测试

页面成功地被打包了

但是这里有一个很大的问题

一个单文件的Vue组件被打包成了css和js两个文件并且css的scoped失效了这完全不能满足我们的需求我们也基本翻遍了使用的插件的各种文档也没有办法把css和js打包进一个文件如果去看源码耗时又太久于是这个方案暂时pass (但是如果使用的是vue2的话这个方案是可行的因为rollup-plugin-vue打包出来默认是单文件)
于是我们使用webpack进行了新的尝试使用vue官方的vue-loader进行尝试 webpack配置如下

const { VueLoaderPlugin } = require("vue-loader");

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "./app.vue"),
  externals: {
    vue: "Vue",
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
    library: "MyPlugin",
    libraryTarget: "umd",
  },
  plugins: [
    // 引入插件
    new VueLoaderPlugin(),
  ],
  optimization: {
    minimize: false,
  },
  module: {
    rules: [
      // vue
      {
        test: /\.vue/,
        use: ["vue-loader"],
      },
      // JS
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              // 开始
              [
                "@babel/preset-env",
                {
                  useBuiltIns: "usage",
                  corejs: {
                    version: 3,
                  }
                },
              ],
              // 结束
            ],
          },
        },
      },
      // CSS
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },

      // Images
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: "assets/images/",
            },
          },
        ],
      },

      // Fonts
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: "assets/fonts/",
            },
          },
        ],
      },
    ],
  },
};