Skip to content

Commit

Permalink
dev: Upgrade to webpack 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@kschiffer
kschiffer committed May 12, 2023
1 parent 1da8d60 commit eb64364
Show file tree
Hide file tree
Showing 7 changed files with 534 additions and 1,349 deletions.
38 changes: 14 additions & 24 deletions config/webpack.config.babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ const env = (obj = {}) => {
}
}

// Export the style config for usage in the storybook config.
export const styleConfig = {
test: /\.(styl|css)$/,
include,
Expand All @@ -127,7 +126,7 @@ export const styleConfig = {
exportLocalsConvention: 'camelCase',
localIdentName: env({
production: '[hash:base64:10]',
development: '[path][local]-[hash:base64:10]',
development: '[local]-[hash:base64:4]',
}),
},
},
Expand All @@ -151,10 +150,6 @@ export default {
stats: 'minimal',
target: 'web',
devtool: production ? false : 'eval-source-map',
node: {
fs: 'empty',
module: 'empty',
},
resolve: {
alias: env({
all: {
Expand All @@ -169,11 +164,11 @@ export default {
}),
},
devServer: {
devMiddleware: {
publicPath: `${ASSETS_ROOT}/`,
},
port: 8080,
inline: true,
hot: !WEBPACK_DEV_SERVER_DISABLE_HMR,
stats: 'minimal',
publicPath: `${ASSETS_ROOT}/`,
proxy: [
{
context: ['/console', '/account', '/oauth', '/api', '/assets/blob'],
Expand All @@ -200,8 +195,6 @@ export default {
output: {
filename: production ? '[name].[chunkhash].js' : '[name].js',
chunkFilename: production ? '[name].[chunkhash].js' : '[name].js',
hashDigest: 'hex',
hashDigestLength: 20,
path: path.resolve(context, PUBLIC_DIR),
crossOriginLoading: 'anonymous',
publicPath: ASSETS_ROOT,
Expand All @@ -216,7 +209,7 @@ export default {
},
},
},
removeAvailableModules: false,
removeEmptyChunks: false,
},
module: {
rules: [
Expand All @@ -238,9 +231,9 @@ export default {
},
{
test: /\.(woff|woff2|ttf|eot|jpg|jpeg|png|svg)$/i,
loader: 'file-loader',
options: {
name: '[name].[hash:hex:20].[ext]',
type: 'asset/resource',
generator: {
filename: '[name].[contenthash:20][ext]',
},
},
styleConfig,
Expand All @@ -261,8 +254,6 @@ export default {
},
plugins: env({
all: [
new webpack.NamedModulesPlugin(),
new webpack.NamedChunksPlugin(),
new webpack.EnvironmentPlugin({
NODE_ENV,
VERSION: version,
Expand Down Expand Up @@ -293,8 +284,9 @@ export default {
production: ['!libs.*.bundle.js', '!libs.*.bundle.js.map'],
}),
}),
// Copy static assets to output directory.
new CopyWebpackPlugin({ patterns: [{ from: `${src}/assets/static` }] }),
new CopyWebpackPlugin({
patterns: [{ from: `${src}/assets/static` }],
}),
new webpack.DllReferencePlugin({
context,
manifest: path.resolve(context, CACHE_DIR, 'dll.json'),
Expand All @@ -315,11 +307,9 @@ export default {
],
development: [
...(!WEBPACK_DEV_SERVER_DISABLE_HMR ? [new ReactRefreshWebpackPlugin()] : []),
new webpack.WatchIgnorePlugin([
/node_modules/,
/locales/,
new RegExp(path.resolve(context, PUBLIC_DIR)),
]),
new webpack.WatchIgnorePlugin({
paths: [/node_modules/, /locales/, path.resolve(context, PUBLIC_DIR)],
}),
new ShellPlugin({
onBuildExit: [`${MAGE} js:extractLocaleFiles`],
}),
Expand Down
22 changes: 11 additions & 11 deletions config/webpack.dll.babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,30 +24,26 @@ const WEBPACK_GENERATE_PRODUCTION_SOURCEMAPS =
process.env.WEBPACK_GENERATE_PRODUCTION_SOURCEMAPS === 'true'

const context = path.resolve(CONTEXT)
const library = '[name]_[hash]'
const library = '[name]_[fullhash]'

const pkg = require(path.resolve(context, 'package.json'))
const excludeLibs = ['react-hot-loader', 'ttn-lw']
const libs = Object.keys(pkg.dependencies || {}).filter(lib => !excludeLibs.includes(lib))
const devtool =
(mode === 'production' && WEBPACK_GENERATE_PRODUCTION_SOURCEMAPS) || mode === 'development'
? 'module-source-map'
? 'source-map'
: false

export default {
context,
mode,
target: 'web',
node: {
fs: 'empty',
module: 'empty',
},
stats: 'minimal',
devtool,
recordsPath: path.resolve(context, CACHE_DIR, '_libs_records'),
entry: { libs },
output: {
filename: mode === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js',
filename: mode === 'production' ? '[name].[fullhash].bundle.js' : '[name].bundle.js',
hashDigest: 'hex',
hashDigestLength: 20,
path: path.resolve(context, PUBLIC_DIR),
Expand All @@ -66,10 +62,14 @@ export default {
rules: [
{
test: /\.(woff|woff2|ttf|eot|jpg|jpeg|png|svg)$/i,
loader: 'file-loader',
options: {
name: '[name].[hash:hex:20].[ext]',
},
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash:20].[ext]',
},
},
],
},
],
},
Expand Down
2 changes: 1 addition & 1 deletion cypress/plugins/tasks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
const childProcess = require('child_process')
const fs = require('fs')
const path = require('path')

const util = require('util')

const { Client } = require('pg')
const yaml = require('js-yaml')
const codeCoverageTask = require('@cypress/code-coverage/task')
Expand Down
9 changes: 4 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
"js-yaml": "^4.0.0",
"json": "^11.0.0",
"messageformat-parser": "^4.1.3",
"mini-css-extract-plugin": "^1.3.8",
"mini-css-extract-plugin": "^2.7.5",
"mjml": "^4.13.0",
"mkdirp": "^3.0.1",
"nib": "^1.2.0",
Expand All @@ -68,10 +68,9 @@
"stylus": "^0.59.0",
"stylus-loader": "^4.3.3",
"wait-on": "^6.0.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^4.13.3",
"webpack-plugin-hash-output": "^3.1.0",
"webpack": "^5.82.1",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0",
"webpack-shell-plugin": "https://github.com/cdeutsch/webpack-shell-plugin.git#bee537d",
"yargs": "^17.7.2"
},
Expand Down
77 changes: 56 additions & 21 deletions pkg/webui/lib/components/with-locale.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
// Copyright © 2023 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
Expand Down Expand Up @@ -115,13 +115,14 @@ const WithLocale = ({ children }) => {
await import(
/* webpackChunkName: "locale-display-names" */ '@formatjs/intl-displaynames/polyfill'
)
await Promise.all(
supportedLanguages.map(async supportedLanguage => {
log(`Polyfilling Intl.DisplayNames for locale "${supportedLanguage}"`)
await import(
/* webpackChunkName: "locale-display-names.[request]" */ `@formatjs/intl-displaynames/locale-data/${supportedLanguage}`
)
}),
// Instead of using dynamic imports that would cause all possible locales to be bundled
// we only load the ones we want to support which as of now are English and Japanese.
// This means that these imports need to be revisited if we choose to support more locales.
await import(
/* webpackChunkName: "locale-display-names.en" */ '@formatjs/intl-displaynames/locale-data/en'
)
await import(
/* webpackChunkName: "locale-display-names.ja" */ '@formatjs/intl-displaynames/locale-data/ja'
)
}

Expand Down Expand Up @@ -231,30 +232,64 @@ const LocaleLoader = ({ children }) => {
// Load locale specific polyfills if needed.
if (window.Intl.NumberFormat.polyfilled) {
log(`Polyfilling NumberFormat for language ${language}`)
promises.push(
import(
/* webpackChunkName: "locale.[request]" */ `@formatjs/intl-numberformat/locale-data/${language}`
),
)
if (language === 'ja') {
promises.push(
import(
/* webpackChunkName: "locale.ja" */ '@formatjs/intl-numberformat/locale-data/ja'
),
)
} else {
promises.push(
import(
/* webpackChunkName: "locale.en" */ '@formatjs/intl-numberformat/locale-data/en'
),
)
}
}

if (window.Intl.DateTimeFormat.polyfilled) {
log(`Polyfilling DateTimeFormat for language ${language}`)
promises.push(
import(/* webpackChunkName: "locale" */ '@formatjs/intl-datetimeformat/add-all-tz'),
import(
/* webpackChunkName: "locale.[request]" */ `@formatjs/intl-datetimeformat/locale-data/${language}`
),
)
switch (language) {
case 'ja':
promises.push(
import(
/* webpackChunkName: "locale.ja" */ '@formatjs/intl-datetimeformat/locale-data/ja'
),
)
break
case 'en':
default:
promises.push(
import(
/* webpackChunkName: "locale.en" */ '@formatjs/intl-datetimeformat/locale-data/en'
),
)
break
}
}

if (window.Intl.RelativeTimeFormat.polyfilled) {
log(`Polyfilling RelativeTimeFormat for language ${language}`)
promises.push(
import(
/* webpackChunkName: "locale.[request]" */ `@formatjs/intl-relativetimeformat/locale-data/${language}`
),
)
switch (language) {
case 'ja':
promises.push(
import(
/* webpackChunkName: "locale.ja" */ '@formatjs/intl-relativetimeformat/locale-data/ja'
),
)
break
case 'en':
default:
promises.push(
import(
/* webpackChunkName: "locale.en" */ '@formatjs/intl-relativetimeformat/locale-data/en'
),
)
break
}
}

try {
Expand Down
1 change: 0 additions & 1 deletion tools/mage/js.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,6 @@ func (js Js) Serve() error {
os.Setenv("DEV_SERVER_BUILD", "true")
return js.runYarnCommandV("webpack-dev-server",
"--config", "config/webpack.config.babel.js",
"-w",
)
}

Expand Down
Loading

0 comments on commit eb64364

Please sign in to comment.