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 CompilerSFC TemplateTransformer 6 imports 2 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  80ffdb31_30bf_204b_ee64_bbb38151ebd9["compile-with-webpack.ts"]
  1d29bf33_f532_e958_df1c_3bd911068a94["path"]
  80ffdb31_30bf_204b_ee64_bbb38151ebd9 --> 1d29bf33_f532_e958_df1c_3bd911068a94
  9089d520_e665_fc17_b5b1_613b68f5ea80["webpack"]
  80ffdb31_30bf_204b_ee64_bbb38151ebd9 --> 9089d520_e665_fc17_b5b1_613b68f5ea80
  1d54ef5e_f6cd_bedb_9340_3afd281a42f0["memory-fs"]
  80ffdb31_30bf_204b_ee64_bbb38151ebd9 --> 1d54ef5e_f6cd_bedb_9340_3afd281a42f0
  750d5325_1865_c1ad_961b_9000d660dd28["create-renderer"]
  80ffdb31_30bf_204b_ee64_bbb38151ebd9 --> 750d5325_1865_c1ad_961b_9000d660dd28
  e470ee39_c7fb_5d09_8d77_4de2a23d9ce8["index"]
  80ffdb31_30bf_204b_ee64_bbb38151ebd9 --> e470ee39_c7fb_5d09_8d77_4de2a23d9ce8
  5c780c77_d839_2cc9_56f4_6f433a51dba0["server"]
  80ffdb31_30bf_204b_ee64_bbb38151ebd9 --> 5c780c77_d839_2cc9_56f4_6f433a51dba0
  bf17eaf3_d7e5_7720_b50f_e69c2147d3a8["ssr-bundle-render.spec.ts"]
  bf17eaf3_d7e5_7720_b50f_e69c2147d3a8 --> 80ffdb31_30bf_204b_ee64_bbb38151ebd9
  067998f7_6426_812d_2e2b_24555482bfb9["ssr-template.spec.ts"]
  067998f7_6426_812d_2e2b_24555482bfb9 --> 80ffdb31_30bf_204b_ee64_bbb38151ebd9
  style 80ffdb31_30bf_204b_ee64_bbb38151ebd9 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 CompilerSFC domain, TemplateTransformer 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: CompilerSFC, subdomain: TemplateTransformer, 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