Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to webpack 5! #93

Merged
merged 1 commit into from
Feb 5, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
# 0.30.0

* Upgrade to webpack 5!
* Upgrade all (most) dependencies
* Improve error handling, log unexpected errors when serving bundles in development instead of hanging
* Remove the graceful termination fix introduced in 0.21.1 as it does not appear to work in node@16

# 0.22.0

* Add support for optional chaining and nullish coalescing operator. This is supported by babel out of the box, but since jetpack is still on webpack 4 (it's faster?), we need to include the right plugins explicitly for this to work.
Expand Down
2 changes: 1 addition & 1 deletion lib/browsers.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const chalk = require('chalk')
const chalk = require('picocolors')
const browserslist = require('browserslist')
const browserslistUseragentRegexp = require('browserslist-useragent-regexp')

Expand Down
2 changes: 1 addition & 1 deletion lib/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const fs = require('fs-extra')
const path = require('path')
const webpack = require('webpack')
const handlebars = require('handlebars')
const chalk = require('chalk')
const chalk = require('picocolors')
const wpConf = require('./webpack.config')
const printConfig = require('./printConfig')
const { recomputeAssets } = require('./options')
Expand Down
2 changes: 1 addition & 1 deletion lib/dev.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const path = require('path')
const chalk = require('chalk')
const chalk = require('picocolors')
const webpackPkg = require('webpack/package.json')
const wpConf = require('./webpack.config')
const printConfig = require('./printConfig')
Expand Down
2 changes: 1 addition & 1 deletion lib/logger.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const chalk = require('chalk')
const chalk = require('picocolors')

module.exports = function (shouldLogVerbose, quiet, prefix = 'jetpack ›') {
return { info, verbose, warn, error }
Expand Down
8 changes: 4 additions & 4 deletions lib/reporter.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
const path = require('path')
const chalk = require('chalk')
const chalk = require('picocolors')

module.exports = function reporter (compiler, log, options = {}) {
let builds = 0

function onError (errors) {
const sfx = errors.length > 1 ? 's' : ''
log.error(`Failed to compile! Found ${chalk.red.bold(errors.length)} error${sfx}:`)
log.error(`Failed to compile! Found ${chalk.bold(chalk.red(errors.length))} error${sfx}:`)
errors.forEach(x => console.log('\n ' + x.replace(/(\r?\n)/g, '$1 ') + '\n'))
}

function onWarning (warnings) {
const sfx = warnings.length > 1 ? 's' : ''
log.warn(`Compiled with ${chalk.yellow.bold(warnings.length)} warning${sfx}:`)
log.warn(`Compiled with ${chalk.bold(chalk.yellow(warnings.length))} warning${sfx}:`)
warnings.forEach(x => console.log('\n ' + x.replace(/(\r?\n)/g, '$1 ') + '\n'))
}

compiler.hooks.invalid.tap('jetpack', file => {
file = path.relative(options.dir, file)
log.info(`File changed: ${chalk.white.bold(file)}`)
log.info(`File changed: ${chalk.bold(chalk.white(file))}`)
})

compiler.hooks.failed.tap('jetpack', (error) => {
Expand Down
9 changes: 4 additions & 5 deletions lib/serve.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,13 @@ function createProxy (target) {
console.log(msg)
res.writeHead(502, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ error: msg }))
} else {
console.log(err)
res.writeHead(502, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ error: err.stack }))
}
})

// req socket closed - terminate proxyReq
req.on('close', () => {
proxyReq.destroy()
})

req.pipe(proxyReq)
} catch (err) {
next(err)
Expand Down
3 changes: 3 additions & 0 deletions lib/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ async function createConfig (options) {
},
infrastructureLogging: {
level: 'none'
},
experiments: {
backCompat: false
}
}

Expand Down
10 changes: 5 additions & 5 deletions lib/webpack.css.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
const postcssrc = require('postcss-load-config')
const browsers = require('./browsers')
const MiniCssExtractPlugin = () => require('mini-css-extract-plugin')

module.exports = async (config, options) => {
// allow overriding postcss config
Expand All @@ -15,7 +14,7 @@ module.exports = async (config, options) => {
test: /\.css$/,
use: [
{
loader: options.production ? MiniCssExtractPlugin().loader : require.resolve('style-loader')
loader: options.production ? require('mini-css-extract-plugin').loader : require.resolve('style-loader')
},
{
loader: require.resolve('css-loader'),
Expand Down Expand Up @@ -58,13 +57,14 @@ module.exports = async (config, options) => {
})

if (options.production) {
config.plugins.push(new (MiniCssExtractPlugin())({
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
config.plugins.push(new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css',
chunkFilename: '[name].[contenthash:8].chunk.css'
}))
if (options.minify) {
const OptimizeCss = require('optimize-css-assets-webpack-plugin')
config.plugins.push(new OptimizeCss())
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
config.optimization.minimizer.push(new CssMinimizerPlugin())
}
}
}
2 changes: 0 additions & 2 deletions lib/webpack.js.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,7 @@ module.exports = (config, options) => {
if (options.minify) {
const Terser = require('terser-webpack-plugin')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this necessary? https://webpack.js.org/plugins/terser-webpack-plugin/#getting-started suggests that v5 has terser built in

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it
image

config.plugins.push(new Terser({
cache: true,
parallel: true,
sourceMap: !!options.sourceMaps,
terserOptions: {
mangle: true,
compress: true,
Expand Down
Loading