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.

Sign up for GitHub

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

Webpack 5 🚀 #1060

Merged
merged 10 commits into from
Feb 1, 2022
Merged

Webpack 5 🚀 #1060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fb34e34
chore(deps): update webpack-cli, webpack-dev-server
marcelgerber Dec 30, 2021
c4fc5ff
chore(deps): update webpack to version 5
marcelgerber Dec 30, 2021
fe8d6f2
chore(deps): update webpack plugins and loaders
marcelgerber Dec 30, 2021
ea1ab06
feat(webpack): enable caching
marcelgerber Dec 30, 2021
b45df40
fix(webpack): Storybook works using webpack 5
marcelgerber Dec 30, 2021
8e8ac52
chore: add yarn resolution to not install webpack 4
marcelgerber Dec 30, 2021
5ea3aa0
chore(webpack): explicitly specify publicPath
marcelgerber Dec 30, 2021
f799bd5
chore(webpack): use `asset` rather than `url-loader`
marcelgerber Jan 27, 2022
ed795c6
chore(webpack): update webpack and loaders
marcelgerber Jan 27, 2022
987e92d
chore(webpack): rebalance bundlewatch limits
marcelgerber Jan 27, 2022
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
4 changes: 2 additions & 2 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
},
{
"path": "./itsJustJavascript/webpack/vendors.js",
"maxSize": "1 MB"
"maxSize": "900 KB"
},
{
"path": "./itsJustJavascript/webpack/owid.js",
"maxSize": "350 KB"
"maxSize": "400 KB"
}
],
"defaultCompression": "none"
Expand Down
3 changes: 3 additions & 0 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
module.exports = {
core: {
builder: "webpack5",
},
stories: ["../**/*.stories.js"],
addons: [
{
Expand Down
16 changes: 9 additions & 7 deletions .storybook/webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,17 @@ const configAdjuster = ({ config }: { config: webpack.Configuration }) => {

const javascriptDir = path.resolve(baseDir, "itsJustJavascript")

config.module!.rules = config.module!.rules.concat([
config.module!.rules = config!.module!.rules!.concat([
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader?url=false",
{
loader: "css-loader",
options: {
url: false,
},
},
"sass-loader",
],
},
Expand All @@ -28,13 +33,10 @@ const configAdjuster = ({ config }: { config: webpack.Configuration }) => {
new MiniCssExtractPlugin({ filename: "[name].css" }),
])

config.node = {
// This is needed so Webpack ignores "dotenv" imports in bundled code
fs: "empty",
}

config.resolve!.modules = ["node_modules", javascriptDir, baseDir] // baseDir is required for resolving *.scss files

config.resolve!.fallback = { fs: false, path: false }

return config
}

Expand Down
40 changes: 20 additions & 20 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"buildLocalBake": "node ./itsJustJavascript/baker/buildLocalBake.js",
"buildStorybook": "build-storybook -c ./itsJustJavascript/.storybook -o .storybook/build",
"buildTsc": "tsc -b -verbose",
"buildWebpack": "rm -rf itsJustJavascript/webpack && ENV=production webpack --config ./itsJustJavascript/webpack.config.js -p --progress",
"buildWebpack": "rm -rf itsJustJavascript/webpack && webpack --mode production --config ./itsJustJavascript/webpack.config.js --progress",
"cleanTsc": "rm -rf itsJustJavaScript && tsc -b -clean",
"deployWordpress": "./wordpress/scripts/deploy.sh",
"fetchServerStatus": "node ./itsJustJavascript/baker/liveCommit.js",
Expand All @@ -27,11 +27,11 @@
"startStorybookServer": "start-storybook -c ./itsJustJavascript/.storybook -p 6006",
"startTmuxServer": "tmex dev \"yarn startTscServer\" \"yarn startAdminServer\" \"yarn startWebpackServer\"",
"startTscServer": "tsc -b -verbose -watch",
"startWebpackServer": "webpack-dev-server --no-live-reload --config ./itsJustJavascript/webpack.config.js",
"startSiteFront": "webpack-dev-server --config ./itsJustJavascript/webpack.config.js",
"startWebpackServer": "webpack serve --mode development --no-live-reload --config ./itsJustJavascript/webpack.config.js",
"startSiteFront": "webpack server --mode development --config ./itsJustJavascript/webpack.config.js",
"startLocalBakeServer": "http-server ./localBake -p 3000",
"testBundlewatch": "ENV=production webpack --config ./itsJustJavascript/webpack.config.js -p && bundlewatch --config .bundlewatch.config.json",
"testBundlewatchJson": "ENV=production webpack --config ./itsJustJavascript/webpack.config.js -p --json > itsJustJavascript/webpack/webpack-bundle-stats.json && bundlewatch --config .bundlewatch.config.json",
"testBundlewatch": "yarn buildWebpack && bundlewatch --config .bundlewatch.config.json",
"testBundlewatchJson": "yarn buildWebpack --json > itsJustJavascript/webpack/webpack-bundle-stats.json && bundlewatch --config .bundlewatch.config.json",
"testCypress": "yarn cypress open --project devTools --config-file cypress/cypress.json",
"testLint": "eslint .",
"testPrettierAll": "yarn prettier --check \"**/*.{tsx,ts,jsx,js,json,md,html,css,scss,yml,php}\"",
Expand Down Expand Up @@ -72,7 +72,6 @@
"@types/linkifyjs": "^2.1.3",
"@types/lodash": "^4.14.161",
"@types/md5": "^2.3.1",
"@types/mini-css-extract-plugin": "^0.9.1",
"@types/minimist": "^1.2.0",
"@types/mousetrap": "^1.6.3",
"@types/mysql": "^2.15.19",
Expand All @@ -98,7 +97,6 @@
"@types/unidecode": "^0.1.1",
"@types/url-join": "^4.0.0",
"@types/url-parse": "^1.4.3",
"@types/webpack": "^4.41.25",
"algoliasearch": "^4.2.0",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
Expand All @@ -110,13 +108,14 @@
"colorbrewer": "^1.3.0",
"cookie-parser": "^1.4.4",
"copy-to-clipboard": "^3.3.1",
"css-loader": "^4.2.2",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.4.1",
"d3": "^6.1.1",
"d3-geo-projection": "^3.0.0",
"dayjs": "^1.9.6",
"decko": "^1.2.0",
"dotenv": "^8.2.0",
"dotenv-webpack": "^6.0.2",
"dotenv-webpack": "^7.0.3",
"entities": "^2.0.3",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
Expand All @@ -127,7 +126,6 @@
"express-error-slack": "^2.0.0",
"express-rate-limit": "^5.1.3",
"fast-cartesian": "^5.1.0",
"file-loader": "^6.1.0",
"filenamify": "^4.1.0",
"fortune": "^5.5.17",
"fs-extra": "^9.0.1",
Expand All @@ -146,7 +144,7 @@
"lodash": "^4.17.20",
"mathjax-full": "^3.1.0",
"md5": "^2.3.0",
"mini-css-extract-plugin": "^0.11.0",
"mini-css-extract-plugin": "^2.4.5",
"minimist": "^1.2.3",
"mobx": "^5.13.0",
"mobx-formatters": "^1.0.2",
Expand All @@ -161,7 +159,6 @@
"node-fetch": "^2.6.7",
"nodemailer": "^6.6.1",
"normalize.css": "^8.0.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"papaparse": "^5.3.1",
"prettier": "^2.5.1",
"progress": "^2.0.3",
Expand All @@ -183,7 +180,7 @@
"rxjs": "6",
"s-expression": "^3.1.1",
"sass": "^1.26.10",
"sass-loader": "^10.0.2",
"sass-loader": "^12.4.0",
"sharp": "^0.29.0",
"shell-quote": "^1.6.1",
"shelljs": "^0.8.5",
Expand All @@ -192,12 +189,11 @@
"slack-node": "^0.1.8",
"slugify": "^1.3.4",
"smooth-scroll": "^16.1.0",
"source-map-loader": "^1.1.3",
"source-map-loader": "^3.0.1",
"string-pixel-width": "^1.10.0",
"stripe": "^8.38.0",
"striptags": "^3.1.1",
"svgo": "^2.8.0",
"terser-webpack-plugin": "^4.2.3",
"timeago.js": "^4.0.2",
"timezone-mock": "^1.0.18",
"topojson-client": "^3.1.0",
Expand All @@ -206,16 +202,17 @@
"typescript": "~4.5.2",
"unidecode": "^0.1.8",
"url-join": "^4.0.0",
"url-loader": "^4.1.0",
"url-parse": "^1.5.2",
"url-slug": "^3.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "^2.2.0"
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3",
"webpack-manifest-plugin": "^4.1.1"
},
"devDependencies": {
"@storybook/addon-essentials": "^6.3.8",
"@storybook/builder-webpack5": "^6.3.8",
"@storybook/manager-webpack5": "^6.3.8",
"@storybook/react": "^6.3.8",
"@types/jest": "^27.0.2",
"@types/opener": "^1.4.0",
Expand All @@ -235,6 +232,9 @@
"tsc-watch": "^4.2.9",
"xhr-mock": "^2.5.1"
},
"resolutions": {
"**/webpack": "^5.0.0"
Copy link
Member Author

@marcelgerber marcelgerber Dec 30, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I don't love this, but this one line lets us get rid of >1000 lines of dependencies in one sweep.
We can remove it once Storybook 7 is released, which will no longer depend on Webpack 4 (storybookjs/storybook#13491)

},
"prettier": {
"semi": false
},
Expand Down
55 changes: 31 additions & 24 deletions webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import webpack from "webpack"
import "webpack-dev-server" // just imported for type magic
import path from "path"

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const ManifestPlugin = require("webpack-manifest-plugin")
const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
const MomentLocalesPlugin = require("moment-locales-webpack-plugin")

const TerserJSPlugin = require("terser-webpack-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const DotenvWebpackPlugin = require("dotenv-webpack")

const config: webpack.ConfigurationFactory = async (env, argv) => {
const config = (env: any, argv: any): webpack.Configuration => {
const isProduction = argv.mode === "production"

// baseDir is necessary to make webpack.config.ts use the correct path both in TS as well as in
Expand All @@ -21,6 +21,12 @@ const config: webpack.ConfigurationFactory = async (env, argv) => {

const javascriptDir = path.resolve(baseDir, "itsJustJavascript")
return {
cache: {
type: "filesystem",
buildDependencies: {
config: [__filename],
},
},
context: javascriptDir,
entry: {
admin: "./adminSiteClient/admin.entry.js",
Expand All @@ -32,7 +38,7 @@ const config: webpack.ConfigurationFactory = async (env, argv) => {
// The bundle created through this cache group contains all the dependencies
// that are _both_ used by owid.entry.js and admin.entry.js.
vendors: {
test: (module) =>
test: (module: webpack.NormalModule) =>
!module.type?.startsWith("css") && // no need to split CSS, since there's very little vendor css anyway
/[\\/]node_modules[\\/]/.test(module.resource),
name: "vendors",
Expand All @@ -51,19 +57,21 @@ const config: webpack.ConfigurationFactory = async (env, argv) => {
},
},
minimize: isProduction,
minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
minimizer: ["...", new CssMinimizerPlugin()],
},
output: {
path: path.join(javascriptDir, "webpack"),
publicPath: "",
filename: "[name].js",
},
resolve: {
extensions: [".js", ".css"],
modules: ["node_modules", javascriptDir, baseDir], // baseDir is required for resolving *.scss files
},
node: {
// This is needed so Webpack ignores "dotenv" imports in bundled code
fs: "empty",
fallback: {
// don't polyfill these Node modules
fs: false,
path: false,
},
},
module: {
rules: [
Expand All @@ -77,18 +85,18 @@ const config: webpack.ConfigurationFactory = async (env, argv) => {
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader?url=false",
{
loader: "css-loader",
options: {
url: false,
},
},
"sass-loader",
],
},
{
test: /\.(jpe?g|gif|png|eot|woff|ttf|svg|woff2)$/,
loader: "url-loader",
options: {
limit: 10000,
useRelativePaths: true,
publicPath: "../",
},
use: "asset",
},
],
},
Expand All @@ -99,15 +107,15 @@ const config: webpack.ConfigurationFactory = async (env, argv) => {
new MiniCssExtractPlugin({ filename: "[name].css" }),

// Writes manifest.json which production code reads to know paths to asset files
new ManifestPlugin(),
new WebpackManifestPlugin(),

// Provide client-side settings from .env
new DotenvWebpackPlugin(),

// Ensure serverSettings.ts and clientSettingsReader.ts never end up in a webpack build by accident
new webpack.IgnorePlugin(
/settings\/(serverSettings|clientSettingsReader)/
),
// Ensure serverSettings.ts never end up in a webpack build by accident
new webpack.IgnorePlugin({
resourceRegExp: /settings\/serverSettings/,
}),

// Remove all moment locales except for "en"
// This way of doing so is recommended by Moment itself: https://momentjs.com/docs/#/use-it/webpack/
Expand All @@ -116,8 +124,7 @@ const config: webpack.ConfigurationFactory = async (env, argv) => {
devServer: {
host: "localhost",
port: 8090,
contentBase: "public",
disableHostCheck: true,
allowedHosts: "all",
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods":
Expand Down
Loading