vue Architecture Docs
Home / File/ compile-with-webpack.ts — vue Source File

compile-with-webpack.ts — vue Source File

Architecture documentation for compile-with-webpack.ts, a typescript file in the vue codebase. 6 imports, 2 dependents.

File typescript VueCore VDom 6 imports 2 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  376852b3_f7bb_d51e_6be4_247c9f18e863["compile-with-webpack.ts"]
  7c454890_6339_b799_a183_9dcaf8992812["path"]
  376852b3_f7bb_d51e_6be4_247c9f18e863 --> 7c454890_6339_b799_a183_9dcaf8992812
  a59766a0_1bfb_6896_0093_c03936fa4763["webpack"]
  376852b3_f7bb_d51e_6be4_247c9f18e863 --> a59766a0_1bfb_6896_0093_c03936fa4763
  777f0036_d28e_cb9b_ee4d_503965264595["memory-fs"]
  376852b3_f7bb_d51e_6be4_247c9f18e863 --> 777f0036_d28e_cb9b_ee4d_503965264595
  9083499b_4ec5_05e2_393e_6ee78c12dd13["create-renderer"]
  376852b3_f7bb_d51e_6be4_247c9f18e863 --> 9083499b_4ec5_05e2_393e_6ee78c12dd13
  386e4f98_fa09_48cc_4d7e_50b82a7536ae["index"]
  376852b3_f7bb_d51e_6be4_247c9f18e863 --> 386e4f98_fa09_48cc_4d7e_50b82a7536ae
  de9d7497_1369_15a8_b4cd_535f0f877614["server"]
  376852b3_f7bb_d51e_6be4_247c9f18e863 --> de9d7497_1369_15a8_b4cd_535f0f877614
  7a6ba2c3_97db_247f_bdf0_773e52e2fab9["ssr-bundle-render.spec.ts"]
  7a6ba2c3_97db_247f_bdf0_773e52e2fab9 --> 376852b3_f7bb_d51e_6be4_247c9f18e863
  f246650d_e128_4b03_fd24_dee5a38a97e4["ssr-template.spec.ts"]
  f246650d_e128_4b03_fd24_dee5a38a97e4 --> 376852b3_f7bb_d51e_6be4_247c9f18e863
  style 376852b3_f7bb_d51e_6be4_247c9f18e863 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import path from 'path'
import webpack from 'webpack'
import MemoryFS from 'memory-fs'
import { RenderOptions } from 'server/create-renderer'
import { createBundleRenderer } from 'server/index'
import VueSSRServerPlugin from 'server/webpack-plugin/server'

export function compileWithWebpack(
  file: string,
  extraConfig?: webpack.Configuration
) {
  const config: webpack.Configuration = {
    mode: 'development',
    entry: path.resolve(__dirname, 'fixtures', file),
    module: {
      rules: [
        {
          test: /async-.*\.js$/,
          loader: require.resolve('./async-loader')
        },
        {
          test: /\.(png|woff2|css)$/,
          loader: require.resolve('file-loader'),
          options: {
            name: '[name].[ext]'
          }
        }
      ]
    }
  }
  if (extraConfig) {
    Object.assign(config, extraConfig)
  }

  const compiler = webpack(config)
  const fs = new MemoryFS()
  compiler.outputFileSystem = fs

  return new Promise<MemoryFS>((resolve, reject) => {
    compiler.run(err => {
      if (err) {
        reject(err)
      } else {
        resolve(fs)
      }
    })
  })
}

export async function createWebpackBundleRenderer(
  file: string,
  options?: RenderOptions & { asBundle?: boolean }
) {
  const asBundle = !!(options && options.asBundle)
  if (options) delete options.asBundle

  const fs = await compileWithWebpack(file, {
    target: 'node',
    devtool: asBundle ? 'source-map' : false,
    output: {
      path: '/',
      filename: 'bundle.js',
      libraryTarget: 'commonjs2'
    },
    externals: [require.resolve('../../../dist/vue.runtime.common.js')],
    plugins: asBundle ? [new VueSSRServerPlugin()] : []
  })

  const bundle = asBundle
    ? JSON.parse(fs.readFileSync('/vue-ssr-server-bundle.json', 'utf-8'))
    : fs.readFileSync('/bundle.js', 'utf-8')
  return createBundleRenderer(bundle, options)
}

Domain

Subdomains

Functions

Dependencies

  • create-renderer
  • index
  • memory-fs
  • path
  • server
  • webpack

Imported By

Source

Frequently Asked Questions

What does compile-with-webpack.ts do?
compile-with-webpack.ts is a source file in the vue codebase, written in typescript. It belongs to the VueCore domain, VDom subdomain.
What functions are defined in compile-with-webpack.ts?
compile-with-webpack.ts defines 2 function(s): compileWithWebpack, createWebpackBundleRenderer.
What does compile-with-webpack.ts depend on?
compile-with-webpack.ts imports 6 module(s): create-renderer, index, memory-fs, path, server, webpack.
What files import compile-with-webpack.ts?
compile-with-webpack.ts is imported by 2 file(s): ssr-bundle-render.spec.ts, ssr-template.spec.ts.
Where is compile-with-webpack.ts in the architecture?
compile-with-webpack.ts is located at packages/server-renderer/test/compile-with-webpack.ts (domain: VueCore, subdomain: VDom, directory: packages/server-renderer/test).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free