Nuxt/packages/webpack/src/webpack.ts

274 lines
7.6 KiB
TypeScript
Raw Normal View History

2020-07-02 13:02:35 +00:00
import path from 'path'
import pify from 'pify'
import webpack from 'webpack'
import Glob from 'glob'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import consola from 'consola'
import type { Compiler, Watching } from 'webpack'
import type { Context as WebpackDevMiddlewareContext, Options as WebpackDevMiddlewareOptions } from 'webpack-dev-middleware'
import type { MiddlewareOptions as WebpackHotMiddlewareOptions } from 'webpack-hot-middleware'
2021-04-02 19:38:11 +00:00
import type { Nuxt } from '@nuxt/kit'
2020-07-02 13:02:35 +00:00
import { createMFS } from './utils/mfs'
2020-09-02 12:27:27 +00:00
import { client, server } from './configs'
import { createWebpackConfigContext, applyPresets, getWebpackConfig } from './utils/config'
2020-07-02 13:02:35 +00:00
const glob = pify(Glob)
class WebpackBundler {
nuxt: Nuxt
plugins: Array<string>
compilers: Array<Compiler>
compilersWatching: Array<Watching & { closeAsync?: () => void }>
// TODO: change this when pify has better types https://github.com/sindresorhus/pify/pull/76
devMiddleware: Record<string, Function & { close?: () => void, context?: WebpackDevMiddlewareContext }>
hotMiddleware: Record<string, Function>
mfs: Compiler['outputFileSystem']
__closed: boolean
constructor (nuxt) {
this.nuxt = nuxt
// TODO: plugins
this.plugins = []
2020-07-02 13:02:35 +00:00
// Class fields
this.compilers = []
this.compilersWatching = []
this.devMiddleware = {}
this.hotMiddleware = {}
// Bind middleware to self
this.middleware = this.middleware.bind(this)
// Initialize shared MFS for dev
if (this.nuxt.options.dev) {
this.mfs = createMFS() as Compiler['outputFileSystem']
2020-07-02 13:02:35 +00:00
}
}
getWebpackConfig (name) {
2020-09-02 12:27:27 +00:00
const ctx = createWebpackConfigContext({ nuxt: this.nuxt })
if (name === 'client') {
applyPresets(ctx, client)
} else if (name === 'server') {
applyPresets(ctx, server)
} else {
2020-07-02 13:02:35 +00:00
throw new Error(`Unsupported webpack config ${name}`)
}
2020-09-02 12:27:27 +00:00
return getWebpackConfig(ctx)
2020-07-02 13:02:35 +00:00
}
async build () {
const { options } = this.nuxt
2020-07-02 13:02:35 +00:00
const webpackConfigs = [
2020-09-02 12:27:27 +00:00
this.getWebpackConfig('client')
2020-07-02 13:02:35 +00:00
]
2021-04-03 12:42:02 +00:00
// if (options.build.ssr) {
webpackConfigs.push(this.getWebpackConfig('server'))
// }
2020-07-02 13:02:35 +00:00
await this.nuxt.callHook('webpack:config', webpackConfigs)
2020-07-02 13:02:35 +00:00
// Check styleResource existence
const { styleResources } = this.nuxt.options.build
2020-07-02 13:02:35 +00:00
if (styleResources && Object.keys(styleResources).length) {
consola.warn(
'Using styleResources without the @nuxtjs/style-resources is not suggested and can lead to severe performance issues.',
'Please use https://github.com/nuxt-community/style-resources-module'
)
for (const ext of Object.keys(styleResources)) {
2021-04-02 19:38:11 +00:00
await Promise.all(Array.from(styleResources[ext]).map(async (p) => {
const styleResourceFiles = await glob(path.resolve(this.nuxt.options.rootDir, p as string))
2020-07-02 13:02:35 +00:00
if (!styleResourceFiles || styleResourceFiles.length === 0) {
throw new Error(`Style Resource not found: ${p}`)
}
}))
}
}
// Configure compilers
this.compilers = webpackConfigs.map((config) => {
const compiler = webpack(config)
// In dev, write files in memory FS
if (options.dev) {
compiler.outputFileSystem = this.mfs
}
return compiler
})
// Start Builds
2021-04-02 19:38:11 +00:00
if (options.dev) {
return Promise.all(this.compilers.map(c => this.webpackCompile(c)))
} else {
for (const c of this.compilers) {
await this.webpackCompile(c)
}
}
2020-07-02 13:02:35 +00:00
}
async webpackCompile (compiler) {
const { name } = compiler.options
const { options } = this.nuxt
2020-07-02 13:02:35 +00:00
await this.nuxt.callHook('build:compile', { name, compiler })
2020-07-02 13:02:35 +00:00
// Load renderer resources after build
compiler.hooks.done.tap('load-resources', async (stats) => {
await this.nuxt.callHook('build:compiled', {
2020-07-02 13:02:35 +00:00
name,
compiler,
stats
})
// Reload renderer
await this.nuxt.callHook('build:resources', this.mfs)
2020-07-02 13:02:35 +00:00
})
// --- Dev Build ---
if (options.dev) {
2020-09-02 12:27:27 +00:00
// Client build
2020-07-02 13:02:35 +00:00
if (['client', 'modern'].includes(name)) {
return new Promise((resolve, reject) => {
2021-03-18 14:26:41 +00:00
compiler.hooks.done.tap('nuxt-dev', () => { resolve(null) })
2020-07-02 13:02:35 +00:00
compiler.hooks.failed.tap('nuxt-errorlog', (err) => { reject(err) })
// Start watch
this.webpackDev(compiler)
})
}
// Server, build and watch for changes
return new Promise((resolve, reject) => {
const watching = compiler.watch(options.watchers.webpack, (err) => {
if (err) {
return reject(err)
}
2021-03-18 14:26:41 +00:00
resolve(null)
2020-07-02 13:02:35 +00:00
})
watching.closeAsync = pify(watching.close)
2020-07-02 13:02:35 +00:00
this.compilersWatching.push(watching)
})
}
// --- Production Build ---
compiler.run = pify(compiler.run)
const stats = await compiler.run()
if (stats.hasErrors()) {
// non-quiet mode: errors will be printed by webpack itself
const error = new Error('Nuxt build error')
if (options.build.quiet === true) {
error.stack = stats.toString('errors-only')
}
throw error
}
// Await for renderer to load resources (programmatic, tests and generate)
await this.nuxt.callHook('build:resources')
2020-07-02 13:02:35 +00:00
}
async webpackDev (compiler) {
consola.debug('Creating webpack middleware...')
const { name } = compiler.options
const buildOptions = this.nuxt.options.build
2021-03-18 14:26:41 +00:00
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2020-07-02 13:02:35 +00:00
const { client, ...hotMiddlewareOptions } = buildOptions.hotMiddleware || {}
// Create webpack dev middleware
this.devMiddleware[name] = pify(
webpackDevMiddleware(
compiler,
{
2020-07-02 13:02:35 +00:00
publicPath: buildOptions.publicPath,
2020-10-29 17:05:29 +00:00
outputFileSystem: this.mfs,
2021-02-17 20:15:47 +00:00
stats: 'none',
2020-07-02 13:02:35 +00:00
...buildOptions.devMiddleware
} as WebpackDevMiddlewareOptions
)
2020-07-02 13:02:35 +00:00
)
this.devMiddleware[name].close = pify(this.devMiddleware[name].close)
this.compilersWatching.push(this.devMiddleware[name].context.watching)
this.hotMiddleware[name] = pify(
webpackHotMiddleware(
compiler,
{
2020-07-02 13:02:35 +00:00
log: false,
heartbeat: 10000,
path: `/__webpack_hmr/${name}`,
...hotMiddlewareOptions
} as WebpackHotMiddlewareOptions
)
2020-07-02 13:02:35 +00:00
)
// Register devMiddleware on server
await this.nuxt.callHook('server:devMiddleware', this.middleware)
2020-07-02 13:02:35 +00:00
}
async middleware (req, res, next) {
2021-01-20 14:43:43 +00:00
if (this.devMiddleware && this.devMiddleware.client) {
await this.devMiddleware.client(req, res)
2020-07-02 13:02:35 +00:00
}
2021-01-20 14:43:43 +00:00
if (this.hotMiddleware && this.hotMiddleware.client) {
await this.hotMiddleware.client(req, res)
2020-07-02 13:02:35 +00:00
}
next()
}
async unwatch () {
await Promise.all(this.compilersWatching.map(watching => watching.closeAsync()))
2020-07-02 13:02:35 +00:00
}
async close () {
if (this.__closed) {
return
}
this.__closed = true
// Unwatch
await this.unwatch()
// Stop webpack middleware
for (const devMiddleware of Object.values(this.devMiddleware)) {
await devMiddleware.close()
}
for (const compiler of this.compilers) {
await new Promise(resolve => compiler.close(resolve))
2020-07-02 13:02:35 +00:00
}
// Cleanup MFS
if (this.mfs) {
delete this.mfs
}
// Cleanup more resources
delete this.compilers
delete this.compilersWatching
delete this.devMiddleware
delete this.hotMiddleware
}
forGenerate () {
2021-04-02 19:38:11 +00:00
this.nuxt.options.target = 'static'
2020-07-02 13:02:35 +00:00
}
}
export function bundle (nuxt: Nuxt) {
const bundler = new WebpackBundler(nuxt)
return bundler.build()
}