Repository URL to install this package:
|
Version:
3.5.2 ▾
|
import { resolve } from 'path'
import { resolveToRoot } from '../resolveToRoot'
import { Configuration, Options } from '../typings'
/**
* @see https://webpack.js.org/plugins/prefetch-plugin/
*/
export default function outputPlugin(config: Configuration, options: Options) {
const {
// --- env
isDev,
isDevClient,
isProdClient,
isServer,
isClient,
// --- computed
DEV_HMR_URL,
// @todo @fixme this is the wrong path
outputPublicPath,
// --- definition
bundleConfig,
} = options
// console.log('[bundling] paths: ', {
// srcEntryFile: bundleConfig.srcEntryFile,
// outputPath: bundleConfig.outputPath,
// })
// @todo put in env configs...
const bundleSrcFile = resolveToRoot(bundleConfig.srcEntryFile)
const outputPath = resolveToRoot(bundleConfig.outputPath)
/**
* For our production client bundles we include a hash in the filename.
* That way we won't hit any browser caching issues when our bundle
* output changes.
*
* @note as we are using the `WebpackMd5Hash` plugin, the hashes will
* only change when the file contents change. This means we can
* set very aggressive caching strategies on our bundle output.
* @see ./env.prod
*
* For any other bundle (typically a server/node) bundle we want a
* determinable output name to allow for easier importing/execution
* of the bundle by our scripts.
*/
const filename = isProdClient ? '[name]-[hash].js' : '[name].js'
// When targetting node we will output our bundle as a commonjs2 module.
// @note changed dev in 3.4.0, so now just using var
// const libraryTarget = isNode ? 'commonjs2' : 'var'
// const libraryTarget = isServer ? 'commonjs2' : 'umd'
const libraryTarget = isServer ? 'commonjs2' : 'var'
// const libraryTarget = 'var'
const output = {
// @note made it only give pathinfo in dev
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isDev,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
// The dir in which our bundle should be output.
path: outputPath,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
//
// The filename format for our bundle's entries.
filename,
// The name format for any additional chunks produced for the bundle.
chunkFilename: '[name]-[hash].js',
/**
* @see https://github.com/ctrlplusb/react-universally/pull/566#issuecomment-373298187
* @api https://webpack.js.org/configuration/output/#output-hotupdatechunkfilename
*/
hotUpdateChunkFilename: '[hash].hot-update.js',
libraryTarget,
publicPath: outputPublicPath,
/**
* @see https://stackoverflow.com/questions/49111086/webpack-4-universal-library-target
* this is here to fix hmr universally
*/
globalObject: 'this',
}
const index = []
// Extends hot reloading with the ability to hot path React Components.
// This should always be at the top of your entries list. Only put
// polyfills above it.
if (isDevClient && process.env.IS_HMR_ENABLED) {
console.log('WEBPACK HOT LOADER IS LOADED ========= [R.I.P.]')
/**
* https://github.com/facebook/react/issues/10441#issuecomment-321913131
* https://github.com/gaearon/react-hot-loader/issues/243#issuecomment-211957140
* https://github.com/glenjamin/webpack-hot-middleware#config
*
* index.push('webpack-hot-middleware/client')
* ^ this is the same as DEV_HMR_URL but devhmrurl has reload=true and putting this here DISABLES that
*/
index.unshift('react-hot-loader/patch')
// Required to support hot reloading of our client.
index.push(DEV_HMR_URL)
}
// The source entry file for the bundle.
index.push(bundleSrcFile)
const entry = {
// We name our entry files "index" as it makes it easier for us to
// import bundle output files (e.g. `import server from './build/server';`)
//
// @note
// not sure if this ever happens except on server....
index,
}
if (bundleSrcFile.includes('client')) {
entry.main = entry.index
delete entry.index
}
config.entry = entry
config.output = output
config.name = isClient ? 'client' : 'server'
}