Skip to content

Commit

Permalink
Revert "Merge pull request #1060 from owid/webpack5"
Browse files Browse the repository at this point in the history 
This reverts commit 65117be, reversing
changes made to 92e9036.

# Conflicts:
#	.storybook/webpack.config.ts
  • Loading branch information
@mlbrgl
mlbrgl committed Feb 4, 2022
1 parent 669371a commit a02dedc
Show file tree
Hide file tree
Showing 6 changed files with 1,739 additions and 1,109 deletions.
4 changes: 2 additions & 2 deletions .bundlewatch.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
},
{
"path": "./itsJustJavascript/webpack/vendors.js",
"maxSize": "900 KB"
"maxSize": "1 MB"
},
{
"path": "./itsJustJavascript/webpack/owid.js",
"maxSize": "400 KB"
"maxSize": "350 KB"
}
],
"defaultCompression": "none"
Expand Down
3 changes: 0 additions & 3 deletions .storybook/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
module.exports = {
core: {
builder: "webpack5",
},
stories: ["../**/*.stories.js"],
addons: [
{
Expand Down
16 changes: 7 additions & 9 deletions .storybook/webpack.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,12 @@ 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,
{
loader: "css-loader",
options: {
url: false,
},
},
"css-loader?url=false",
"sass-loader",
],
},
Expand All @@ -33,9 +28,12 @@ const configAdjuster = ({ config }: { config: webpack.Configuration }) => {
new MiniCssExtractPlugin({ filename: "[name].css" }),
])

config.resolve!.modules = ["node_modules", javascriptDir, baseDir] // baseDir is required for resolving *.scss files
config.node = {
// This is needed so Webpack ignores "dotenv" imports in bundled code
fs: "empty",
}

config.resolve!.fallback = { assert: false, fs: false, path: false }
config.resolve!.modules = ["node_modules", javascriptDir, baseDir] // baseDir is required for resolving *.scss files

return config
}
Expand Down
40 changes: 20 additions & 20 deletions package.json
View file
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 && webpack --mode production --config ./itsJustJavascript/webpack.config.js --progress",
"buildWebpack": "rm -rf itsJustJavascript/webpack && ENV=production webpack --config ./itsJustJavascript/webpack.config.js -p --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 serve --mode development --no-live-reload --config ./itsJustJavascript/webpack.config.js",
"startSiteFront": "webpack server --mode development --config ./itsJustJavascript/webpack.config.js",
"startWebpackServer": "webpack-dev-server --no-live-reload --config ./itsJustJavascript/webpack.config.js",
"startSiteFront": "webpack-dev-server --config ./itsJustJavascript/webpack.config.js",
"startLocalBakeServer": "http-server ./localBake -p 3000",
"testBundlewatch": "yarn buildWebpack && bundlewatch --config .bundlewatch.config.json",
"testBundlewatchJson": "yarn buildWebpack --json > itsJustJavascript/webpack/webpack-bundle-stats.json && bundlewatch --config .bundlewatch.config.json",
"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",
"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,6 +72,7 @@
"@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 @@ -97,6 +98,7 @@
"@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 @@ -108,14 +110,13 @@
"colorbrewer": "^1.3.0",
"cookie-parser": "^1.4.4",
"copy-to-clipboard": "^3.3.1",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.4.1",
"css-loader": "^4.2.2",
"d3": "^6.1.1",
"d3-geo-projection": "^3.0.0",
"dayjs": "^1.9.6",
"decko": "^1.2.0",
"dotenv": "^8.2.0",
"dotenv-webpack": "^7.0.3",
"dotenv-webpack": "^6.0.2",
"entities": "^2.0.3",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
Expand All @@ -126,6 +127,7 @@
"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 @@ -144,7 +146,7 @@
"lodash": "^4.17.20",
"mathjax-full": "^3.1.0",
"md5": "^2.3.0",
"mini-css-extract-plugin": "^2.4.5",
"mini-css-extract-plugin": "^0.11.0",
"minimist": "^1.2.3",
"mobx": "^5.13.0",
"mobx-formatters": "^1.0.2",
Expand All @@ -159,6 +161,7 @@
"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 @@ -180,7 +183,7 @@
"rxjs": "6",
"s-expression": "^3.1.1",
"sass": "^1.26.10",
"sass-loader": "^12.4.0",
"sass-loader": "^10.0.2",
"sharp": "^0.29.0",
"shell-quote": "^1.6.1",
"shelljs": "^0.8.5",
Expand All @@ -189,11 +192,12 @@
"slack-node": "^0.1.8",
"slugify": "^1.3.4",
"smooth-scroll": "^16.1.0",
"source-map-loader": "^3.0.1",
"source-map-loader": "^1.1.3",
"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 @@ -202,17 +206,16 @@
"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": "^5.67.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3",
"webpack-manifest-plugin": "^4.1.1"
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "^2.2.0"
},
"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 @@ -232,9 +235,6 @@
"tsc-watch": "^4.2.9",
"xhr-mock": "^2.5.1"
},
"resolutions": {
"**/webpack": "^5.0.0"
},
"prettier": {
"semi": false
},
Expand Down
55 changes: 24 additions & 31 deletions webpack.config.ts
View file
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 { WebpackManifestPlugin } = require("webpack-manifest-plugin")
const ManifestPlugin = require("webpack-manifest-plugin")
const MomentLocalesPlugin = require("moment-locales-webpack-plugin")

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

const config = (env: any, argv: any): webpack.Configuration => {
const config: webpack.ConfigurationFactory = async (env, argv) => {
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,12 +21,6 @@ const config = (env: any, argv: any): webpack.Configuration => {

const javascriptDir = path.resolve(baseDir, "itsJustJavascript")
return {
cache: {
type: "filesystem",
buildDependencies: {
config: [__filename],
},
},
context: javascriptDir,
entry: {
admin: "./adminSiteClient/admin.entry.js",
Expand All @@ -38,7 +32,7 @@ const config = (env: any, argv: any): webpack.Configuration => {
// 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: webpack.NormalModule) =>
test: (module) =>
!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 @@ -57,21 +51,19 @@ const config = (env: any, argv: any): webpack.Configuration => {
},
},
minimize: isProduction,
minimizer: ["...", new CssMinimizerPlugin()],
minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
},
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
fallback: {
// don't polyfill these Node modules
fs: false,
path: false,
},
},
node: {
// This is needed so Webpack ignores "dotenv" imports in bundled code
fs: "empty",
},
module: {
rules: [
Expand All @@ -85,18 +77,18 @@ const config = (env: any, argv: any): webpack.Configuration => {
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
},
},
"css-loader?url=false",
"sass-loader",
],
},
{
test: /\.(jpe?g|gif|png|eot|woff|ttf|svg|woff2)$/,
use: "asset",
loader: "url-loader",
options: {
limit: 10000,
useRelativePaths: true,
publicPath: "../",
},
},
],
},
Expand All @@ -107,15 +99,15 @@ const config = (env: any, argv: any): webpack.Configuration => {
new MiniCssExtractPlugin({ filename: "[name].css" }),

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

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

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

// 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 @@ -124,7 +116,8 @@ const config = (env: any, argv: any): webpack.Configuration => {
devServer: {
host: "localhost",
port: 8090,
allowedHosts: "all",
contentBase: "public",
disableHostCheck: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods":
Expand Down
Loading

0 comments on commit a02dedc

Please sign in to comment.