Could not see the intact template content in browser devtool

[StitchC]

• [email protected]
• [email protected]
• [email protected]
• webpack config

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")
const { VueLoaderPlugin } = require('vue-loader')
const configure = require('../lib/configure')
const { ModuleFederationPlugin } = require('webpack').container
const {
  getNodeEnvConf,
  fixedToRelativePath,
  getLibs,
  getProcessNodeEnv,
  isProcessNodeEnvEqualsMode,
} = require('../lib/utils')
const path = require('path')

const NODE_ENV_CONF = getNodeEnvConf() || getProcessNodeEnv()
const mode = getProcessNodeEnv()
const isDevMode = isProcessNodeEnvEqualsMode('development')

const config = {
  target: 'web',
  output: {
    path: fixedToRelativePath('/dist'),
    filename: 'static/js/[name].[contenthash].js',
    chunkFilename: 'static/js/[name].[contenthash].chunk.js',
    publicPath: configure.domainUrl,
    library: 'plutus-[name]',
    libraryTarget: 'umd',
    // jsonpFunction: `webpackJsonp_${packageName}`,
  },
  mode: mode,
  cache: isDevMode ? {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  } : false,
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader',
        }],
        exclude: /node_modules/,
        include: /(print)|(src)/i,
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        generator: {
          filename: 'static/font/[name].[contenthash].[ext]',
        },
      },
      {
        test: /\.svg$/,
        use: [{
          loader: 'svg-sprite-loader',
          options: {
            symbolId: 'icon-[name]',
          },
        }],
        exclude: [path.resolve(__dirname, '../node_modules/')],
        include: [path.resolve(__dirname, '../src/icons/svg/'), path.resolve(__dirname, '../print/')],
      },
      {
        test: /\.(png|svg|jpg|gif|jpeg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/image/[name].[contenthash].[ext]',
        },
        exclude: [path.resolve(__dirname, '../src/icons/svg/'), path.resolve(__dirname, '../node_modules/')],
        include: [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../print/')],
      },
      {
        test: /\.worker\.js$/,
        type: 'asset/resource',
        // use: { loader: 'worker-loader' },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        { from: "node_modules/pdfjs-dist/cmaps", to: "static/pdfjs/cmaps" },
        { from: "node_modules/pdfjs-dist/build/pdf.worker.mjs", to: "static/pdfjs/workers" },
      ],
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: fixedToRelativePath('/public/index.html'),
      excludeChunks: ['runtime~print', 'print'],
      favicon: fixedToRelativePath('/public/favicon.ico'),
      minify: {
        collapseWhitespace: !isDevMode,
        removeComments: !isDevMode,
      },
      inject: 'body',
    }),
    new ModuleFederationPlugin({
      remotes: getLibs(configure.libs),
    }),
  ].concat(isDevMode ? [
    new webpack.HotModuleReplacementPlugin(),
  ] : [
  ]),
  resolve: {
    extensions: ['.vue', '.js', '.scss', '.css', '.json'],
    alias: {
      '@@': fixedToRelativePath('/'),
      '@': fixedToRelativePath('/src'),
      '@assets': fixedToRelativePath('/src/assets'),
      '@components': fixedToRelativePath('/src/components'),
      '@directive': fixedToRelativePath('/src/directive'),
      '@filter': fixedToRelativePath('/src/filter'),
      '@icons': fixedToRelativePath('/src/icons'),
      '@lang': fixedToRelativePath('/src/lang'),
      '@layout': fixedToRelativePath('/src/layout'),
      '@router': fixedToRelativePath('/src/router'),
      '@store': fixedToRelativePath('/src/store'),
      '@styles': fixedToRelativePath('/src/styles'),
      '@utils': fixedToRelativePath('/src/utils'),
      '@views': fixedToRelativePath('/src/views'),
      vue: 'vue/dist/vue.esm.js',
    },
    fallback: {
      path: require.resolve('path-browserify'),
      events: false,
      // url: require.resolve('url/')
      fs: false,
    },
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
  devtool: isDevMode ? 'source-map' : false,
  externals: {},
  optimization: isDevMode ? undefined : {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1, 
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: '-',
      cacheGroups: {
        defaultVendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial',
        },
        elementUI: {
          name: 'chunk-elementUI',
          test: /[\\/]node_modules[\\/]element-ui[\\/]/,
          priority: 20,
          chunks: 'all',
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true,
        },
      },
    },
  },
  experiments: {
    lazyCompilation: isDevMode && process.env.RUN_TYPE === 'lazy',
  },
}

module.exports = config

• reproduce

1. run dev compile file by webpack and the above configuration file
2. open devtool check some vue file(eg. App.vue)
3. switch the devtool tab to "source"
4. check some .vue file (eg. App.vue) in the sidebar and no one can display the intact .vue template content like this

• expect
  can see the intact template content and add breakpoint to some function