mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
![Tim Neutkens](/assets/img/avatar_default.png)
* Speed up next build
* Document webpack config
* Speed up next build
* Remove comment
* Add comment
* Clean up rules
* Add comments
* Run in parallel
* Push plugins seperately
* Create a new chunk for react
* Don’t uglify react since it’s already uglified. Move react to commons in development
* Use the minified version directly
* Re-add globpattern
* Move loaders into a separate variable
* Add comment linking to Dan’s explanation
* Remove dot
* Add universal webpack
* Initial dev support
* Fix linting
* Add changes from Arunoda's work
* Made next dev works.
But super slow and no HMR support.
* Fix client side hot reload
* Server side hmr
* Only in dev
* Add on-demand-entries client + hot-middleware
* Add .babelrc support
* Speed up on demand entries by running in parallel
* Serve static generated files
* Add missing config in dev
* Add sass support
* Add support for .map
* Add cssloader config and fix .jsx support
* Rename
* use same defaults as css-loader. Fix linting
* Add NoEmitErrorsPlugin
* Add clientBootstrap
* Use webpackhotmiddleware on the multi compiler
* alpha.3
* Use babel 16.2.x
* Fix reloading after error
* Remove comment
* Release 5.0.0-univeral-alpha.1
* Remove check for React 16
* Release 5.0.0-universal-alpha.2
* React hot loader v4
* Use our static file rendering machanism to serve pages.
This should work well since the file path for a page is predictable.
* Release 5.0.0-universal-alpha.3
* Remove optional loaders
* Release 5.0.0-universal-alpha.4
* Remove clientBootstrap
* Remove renderScript
* Make sure pages bundles are served correctly
* Remove unused import
* Revert to using the same code as canary
* Fix hot loader
* Release 5.0.0-universal-alpha.5
* Check if externals dir exist before applying config
* Add typescript support
* Add support for transpiling certain packages in node_modules
Thanks to @giuseppeg’s work in https://github.com/zeit/next.js/pull/3319
* Add BABEL_DISABLE_CACHE support
* Make sourcemaps in production opt-in
* Revert "Add support for transpiling certain packages in node_modules"
This reverts commit d4b1d9babfb4b9ed4f4b12d56d52dee233e862da.
In favor of a better api around this.
* Support typescript through next.config.js
* Remove comments
* Bring back commons.js calculation
* Remove unused dependencies
* Move base.config.js to webpack.js
* Make sure to only invalidate webpackDevMiddleware one after other.
* Allow babel-loder caching by default.
* Add comment about preact support
* Bring back buildir replace
* Remove obsolete plugin
* Remove build replace, speed up build
* Resolve page entries like pages/day/index.js to pages/day.js
* Add componentDidCatch back
* Compile to bundles
* Use config.distDir everywhere
* Make sure the file is an array
* Remove console.log
* Apply optimization to uglifyjs
* Add comment pointing to source
* Create entries the same way in dev and production
* Remove unused and broken pagesGlobPattern
* day/index.js is automatically turned into day.js at build time
* Remove poweredByHeader option
* Load pages with the correct path.
* Release 5.0.0-universal-alpha.6
* Make sure react-dom/server can be overwritten by module-alias
* Only add react-hot-loader babel plugin in dev
* Release 5.0.0-universal-alpha.7
* Revert tests
* Release 5.0.0-universal-alpha.10
* Make sure next/head is working properly.
* Add wepack alias for 'next' back.
* Make sure overriding className in next/head works
* Alias react too
* Add missing r
* Fragment fallback has to wrap the children
* Use min.js
* Remove css.js
* Remove wallaby.js
* Release 5.0.0-universal-alpha.11
* Resolve relative to workdir instead of next
* Make sure we touch the right file
* Resolve next modules
* Remove dotjsx removal plugins since we use webpack on the server
* Revert "Resolve relative to workdir instead of next"
This reverts commit a13f3e4ab565df9e2c9a3dfc8eb4009c0c2e02ed.
* Externalize any locally loaded module lives outside of app dir.
* Remove server aliases
* Check node_modules reliably
* Add symlink to next for tests
* Make sure dynamic imports work locally.
This is why we need it: b545b519b2/lib/MainTemplate.js (L68)
We need to have the finally clause in the above in __webpack_require__.
webpack output option strictModuleExceptionHandling does that.
* dynmaic -> dynamic
* Remove webpack-node-externals
* Make sure dynamic imports support SSR.
* Remove css support in favor of next-css
* Make sure we load path from `/` since it’s included in the path matching
* Catch when ensurepage couldn’t be fulfilled for `.js.map`
* Register require cache flusher for both client and server
* Add comment explaining this is to facilitate hot reloading
* Only load module when needed
* Remove unused modules
* Release 5.0.0-universal-alpha.12
* Only log the `found babel` message once
* Make sure ondemand entries working correctly.
Now we are just using a single instance of OnDemandEntryHandler.
* Better sourcemaps
* Release 5.0.0-universal-alpha.13
* Lock uglify version to 1.1.6
* Release 5.0.0-universal-alpha.14
* Fix a typo.
* Introduce multi-zones support for mircofrontends
* Add section on css
292 lines
8.5 KiB
JavaScript
292 lines
8.5 KiB
JavaScript
import { join, relative, sep } from 'path'
|
|
import WebpackDevMiddleware from 'webpack-dev-middleware'
|
|
import WebpackHotMiddleware from 'webpack-hot-middleware'
|
|
import onDemandEntryHandler from './on-demand-entry-handler'
|
|
import webpack from 'webpack'
|
|
import getBaseWebpackConfig from './build/webpack'
|
|
import clean from './build/clean'
|
|
import getConfig from './config'
|
|
import UUID from 'uuid'
|
|
import {
|
|
IS_BUNDLED_PAGE,
|
|
addCorsSupport
|
|
} from './utils'
|
|
|
|
export default class HotReloader {
|
|
constructor (dir, { quiet, conf } = {}) {
|
|
this.dir = dir
|
|
this.quiet = quiet
|
|
this.middlewares = []
|
|
this.webpackDevMiddleware = null
|
|
this.webpackHotMiddleware = null
|
|
this.initialized = false
|
|
this.stats = null
|
|
this.compilationErrors = null
|
|
this.prevAssets = null
|
|
this.prevChunkNames = null
|
|
this.prevFailedChunkNames = null
|
|
this.prevChunkHashes = null
|
|
// Here buildId could be any value.
|
|
// Our router accepts any value in the dev mode.
|
|
// But for the webpack-compiler and for the webpack-dev-server
|
|
// it should be the same value.
|
|
this.buildId = UUID.v4()
|
|
|
|
this.config = getConfig(dir, conf)
|
|
}
|
|
|
|
async run (req, res) {
|
|
// Usually CORS support is not needed for the hot-reloader (this is dev only feature)
|
|
// With when the app runs for multi-zones support behind a proxy,
|
|
// the current page is trying to access this URL via assetPrefix.
|
|
// That's when the CORS support is needed.
|
|
const { preflight } = addCorsSupport(req, res)
|
|
if (preflight) {
|
|
return
|
|
}
|
|
|
|
for (const fn of this.middlewares) {
|
|
await new Promise((resolve, reject) => {
|
|
fn(req, res, (err) => {
|
|
if (err) return reject(err)
|
|
resolve()
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
async start () {
|
|
await clean(this.dir)
|
|
|
|
const configs = await Promise.all([
|
|
getBaseWebpackConfig(this.dir, { dev: true, isServer: false, config: this.config }),
|
|
getBaseWebpackConfig(this.dir, { dev: true, isServer: true, config: this.config })
|
|
])
|
|
|
|
const compiler = webpack(configs)
|
|
|
|
const buildTools = await this.prepareBuildTools(compiler)
|
|
this.assignBuildTools(buildTools)
|
|
|
|
this.stats = (await this.waitUntilValid()).stats[0]
|
|
}
|
|
|
|
async stop (webpackDevMiddleware) {
|
|
const middleware = webpackDevMiddleware || this.webpackDevMiddleware
|
|
if (middleware) {
|
|
return new Promise((resolve, reject) => {
|
|
middleware.close((err) => {
|
|
if (err) return reject(err)
|
|
resolve()
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
async reload () {
|
|
this.stats = null
|
|
|
|
await clean(this.dir)
|
|
|
|
const configs = await Promise.all([
|
|
getBaseWebpackConfig(this.dir, { dev: true, isServer: false, config: this.config }),
|
|
getBaseWebpackConfig(this.dir, { dev: true, isServer: true, config: this.config })
|
|
])
|
|
|
|
const compiler = webpack(configs)
|
|
|
|
const buildTools = await this.prepareBuildTools(compiler)
|
|
this.stats = await this.waitUntilValid(buildTools.webpackDevMiddleware)
|
|
|
|
const oldWebpackDevMiddleware = this.webpackDevMiddleware
|
|
|
|
this.assignBuildTools(buildTools)
|
|
await this.stop(oldWebpackDevMiddleware)
|
|
}
|
|
|
|
assignBuildTools ({ webpackDevMiddleware, webpackHotMiddleware, onDemandEntries }) {
|
|
this.webpackDevMiddleware = webpackDevMiddleware
|
|
this.webpackHotMiddleware = webpackHotMiddleware
|
|
this.onDemandEntries = onDemandEntries
|
|
this.middlewares = [
|
|
webpackDevMiddleware,
|
|
webpackHotMiddleware,
|
|
onDemandEntries.middleware()
|
|
]
|
|
}
|
|
|
|
async prepareBuildTools (compiler) {
|
|
// This flushes require.cache after emitting the files. Providing 'hot reloading' of server files.
|
|
compiler.compilers.forEach((singleCompiler) => {
|
|
singleCompiler.plugin('after-emit', (compilation, callback) => {
|
|
const { assets } = compilation
|
|
|
|
if (this.prevAssets) {
|
|
for (const f of Object.keys(assets)) {
|
|
deleteCache(assets[f].existsAt)
|
|
}
|
|
for (const f of Object.keys(this.prevAssets)) {
|
|
if (!assets[f]) {
|
|
deleteCache(this.prevAssets[f].existsAt)
|
|
}
|
|
}
|
|
}
|
|
this.prevAssets = assets
|
|
|
|
callback()
|
|
})
|
|
})
|
|
|
|
compiler.compilers[0].plugin('done', (stats) => {
|
|
const { compilation } = stats
|
|
const chunkNames = new Set(
|
|
compilation.chunks
|
|
.map((c) => c.name)
|
|
.filter(name => IS_BUNDLED_PAGE.test(name))
|
|
)
|
|
|
|
const failedChunkNames = new Set(compilation.errors
|
|
.map((e) => e.module.reasons)
|
|
.reduce((a, b) => a.concat(b), [])
|
|
.map((r) => r.module.chunks)
|
|
.reduce((a, b) => a.concat(b), [])
|
|
.map((c) => c.name))
|
|
|
|
const chunkHashes = new Map(
|
|
compilation.chunks
|
|
.filter(c => IS_BUNDLED_PAGE.test(c.name))
|
|
.map((c) => [c.name, c.hash])
|
|
)
|
|
|
|
if (this.initialized) {
|
|
// detect chunks which have to be replaced with a new template
|
|
// e.g, pages/index.js <-> pages/_error.js
|
|
const added = diff(chunkNames, this.prevChunkNames)
|
|
const removed = diff(this.prevChunkNames, chunkNames)
|
|
const succeeded = diff(this.prevFailedChunkNames, failedChunkNames)
|
|
|
|
// reload all failed chunks to replace the templace to the error ones,
|
|
// and to update error content
|
|
const failed = failedChunkNames
|
|
|
|
const rootDir = join('bundles', 'pages')
|
|
|
|
for (const n of new Set([...added, ...removed, ...failed, ...succeeded])) {
|
|
const route = toRoute(relative(rootDir, n))
|
|
this.send('reload', route)
|
|
}
|
|
|
|
for (const [n, hash] of chunkHashes) {
|
|
if (!this.prevChunkHashes.has(n)) continue
|
|
if (this.prevChunkHashes.get(n) === hash) continue
|
|
|
|
const route = toRoute(relative(rootDir, n))
|
|
|
|
// notify change to recover from runtime errors
|
|
this.send('change', route)
|
|
}
|
|
}
|
|
|
|
this.initialized = true
|
|
this.stats = stats
|
|
this.compilationErrors = null
|
|
this.prevChunkNames = chunkNames
|
|
this.prevFailedChunkNames = failedChunkNames
|
|
this.prevChunkHashes = chunkHashes
|
|
})
|
|
|
|
const ignored = [
|
|
/(^|[/\\])\../, // .dotfiles
|
|
/node_modules/
|
|
]
|
|
|
|
let webpackDevMiddlewareConfig = {
|
|
publicPath: `/_next/webpack/`,
|
|
noInfo: true,
|
|
quiet: true,
|
|
clientLogLevel: 'warning',
|
|
watchOptions: { ignored }
|
|
}
|
|
|
|
if (this.config.webpackDevMiddleware) {
|
|
console.log(`> Using "webpackDevMiddleware" config function defined in ${this.config.configOrigin}.`)
|
|
webpackDevMiddlewareConfig = this.config.webpackDevMiddleware(webpackDevMiddlewareConfig)
|
|
}
|
|
|
|
const webpackDevMiddleware = WebpackDevMiddleware(compiler, webpackDevMiddlewareConfig)
|
|
|
|
const webpackHotMiddleware = WebpackHotMiddleware(compiler.compilers[0], {
|
|
path: '/_next/webpack-hmr',
|
|
log: false,
|
|
heartbeat: 2500
|
|
})
|
|
|
|
const onDemandEntries = onDemandEntryHandler(webpackDevMiddleware, compiler.compilers, {
|
|
dir: this.dir,
|
|
dev: true,
|
|
reload: this.reload.bind(this),
|
|
...this.config.onDemandEntries
|
|
})
|
|
|
|
return {
|
|
webpackDevMiddleware,
|
|
webpackHotMiddleware,
|
|
onDemandEntries
|
|
}
|
|
}
|
|
|
|
waitUntilValid (webpackDevMiddleware) {
|
|
const middleware = webpackDevMiddleware || this.webpackDevMiddleware
|
|
return new Promise((resolve) => {
|
|
middleware.waitUntilValid(resolve)
|
|
})
|
|
}
|
|
|
|
async getCompilationErrors () {
|
|
// When we are reloading, we need to wait until it's reloaded properly.
|
|
await this.onDemandEntries.waitUntilReloaded()
|
|
|
|
if (!this.compilationErrors) {
|
|
this.compilationErrors = new Map()
|
|
|
|
if (this.stats.hasErrors()) {
|
|
const { compiler, errors } = this.stats.compilation
|
|
|
|
for (const err of errors) {
|
|
for (const r of err.module.reasons) {
|
|
for (const c of r.module.chunks) {
|
|
// get the path of the bundle file
|
|
const path = join(compiler.outputPath, c.name)
|
|
const errors = this.compilationErrors.get(path) || []
|
|
this.compilationErrors.set(path, errors.concat([err]))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return this.compilationErrors
|
|
}
|
|
|
|
send (action, ...args) {
|
|
this.webpackHotMiddleware.publish({ action, data: args })
|
|
}
|
|
|
|
async ensurePage (page) {
|
|
await this.onDemandEntries.ensurePage(page)
|
|
}
|
|
}
|
|
|
|
function deleteCache (path) {
|
|
delete require.cache[path]
|
|
}
|
|
|
|
function diff (a, b) {
|
|
return new Set([...a].filter((v) => !b.has(v)))
|
|
}
|
|
|
|
function toRoute (file) {
|
|
const f = sep === '\\' ? file.replace(/\\/g, '/') : file
|
|
return ('/' + f).replace(/(\/index)?\.js$/, '') || '/'
|
|
}
|