Vue-Cli-Service - 跳过 webpack答案

【问题标题】：Vue-Cli-Service - Skipping webpackVue-Cli-Service - 跳过 webpack
【发布时间】：2020-12-13 05:16:45
【问题描述】：

如何在跳过 webpack 的同时让 vue cli 服务 编译代码？我只需要它来使用 babel。

基本上我试图避免这样的代码：

/******/(function (modules) {
  // webpackBootstrap
  /******/ // The module cache
  /******/var installedModules = {};
  /******/
  /******/ // The require function
  /******/function __webpack_require__(moduleId) {
    /******/
    /******/ // Check if module is in cache
    /******/if (installedModules[moduleId]) {
      /******/return installedModules[moduleId].exports;
      /******/
    }
    /******/ // Create a new module (and put it into the cache)
    /******/var module = installedModules[moduleId] = {
      /******/i: moduleId,
      /******/l: false,
      /******/exports: {}
      /******/ };
    /******/
    /******/ // Execute the module function
    /******/modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    /******/ // Flag the module as loaded
    /******/module.l = true;
    /******/
    /******/ // Return the exports of the module
    /******/return module.exports;

显然这只是一部分，但我想你明白了。那么干净的构建可能吗？我正在寻找的输出类型是：

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = main;
function main(_ref) {
  var x = _ref.x,
      y = _ref.y,
      contextPath = _ref.contextPath,
      configuration = _ref.configuration;

  var node = document.getElementById(y);

  node.innerHTML = "test";
}

源文件在哪里：

export default function main({x, contextPath, y, configuration}) {
    
    const node = document.getElementById(y);

    node.innerHTML ="test";
    
}

使用以下命令转译：

babel --source-maps -d build src

但是，我尝试使用 vue-cli-service 进行相同的操作，但它破坏了我的代码，其中包含所有命名空间和依赖项要求：

vue-cli-service build --dest build src/index.js

这是我的 vue.config.js：

module.exports = {
    productionSourceMap: false,
    filenameHashing: false,
    chainWebpack: config => config.optimization.minimize(false),
    configureWebpack: {
        output: {
            filename: "./index.js"
        }
    },
    css: {
      extract: {
        filename: "./index.css"
      }
    }
  }

【问题讨论】：

当 babel 对你来说足够好时，你为什么需要 vue-cli？

标签： vue.js webpack babeljs

【解决方案1】：

您可以通过设置optimization.runtimeChunk 选项将 webpack 引导代码提取到另一个文件中

...
optimization: {
  runtimeChunk: true
}
...

这是我能想到的最符合您需求的东西。

【讨论】：