From 66f8bf5d5033e81180ac29a4c7ecb4082a4d6a22 Mon Sep 17 00:00:00 2001 From: Max Duval Date: Mon, 24 Jun 2024 09:46:51 +0100 Subject: [PATCH] revert: keep webpack CJS --- dev/watch.mjs | 2 +- .../compile/javascript/webpack-atoms.mjs | 2 +- .../compile/javascript/webpack.dev.mjs | 2 +- .../__tasks__/compile/javascript/webpack.mjs | 2 +- webpack.config.atoms.cjs | 36 +++++ webpack.config.atoms.mjs | 38 ----- webpack.config.cjs | 150 ++++++++++++++++++ webpack.config.dev.cjs | 26 +++ webpack.config.dev.mjs | 26 --- webpack.config.mjs | 140 ---------------- ...config.prod.mjs => webpack.config.prod.cjs | 17 +- 11 files changed, 225 insertions(+), 216 deletions(-) create mode 100644 webpack.config.atoms.cjs delete mode 100644 webpack.config.atoms.mjs create mode 100644 webpack.config.cjs create mode 100644 webpack.config.dev.cjs delete mode 100644 webpack.config.dev.mjs delete mode 100644 webpack.config.mjs rename webpack.config.prod.mjs => webpack.config.prod.cjs (72%) diff --git a/dev/watch.mjs b/dev/watch.mjs index 2f82a3f182c..a4b8eca1862 100755 --- a/dev/watch.mjs +++ b/dev/watch.mjs @@ -4,7 +4,7 @@ import cpy from 'cpy'; import chalk from 'chalk'; import bs from 'browser-sync'; import bsConfig from './bs-config.mjs'; -import config from '../webpack.config.dev.mjs'; +import config from '../webpack.config.dev.cjs'; const browserSync = bs.create(); diff --git a/tools/__tasks__/compile/javascript/webpack-atoms.mjs b/tools/__tasks__/compile/javascript/webpack-atoms.mjs index 80ba2232bf2..eac7016a616 100644 --- a/tools/__tasks__/compile/javascript/webpack-atoms.mjs +++ b/tools/__tasks__/compile/javascript/webpack-atoms.mjs @@ -2,7 +2,7 @@ import { Observable } from 'rxjs'; import webpack from 'webpack'; import chalk from 'chalk'; -import config from '../../../../webpack.config.atoms.mjs'; +import config from '../../../../webpack.config.atoms.cjs'; import { reporter } from './webpack-progress-reporter.mjs'; const { red } = chalk; diff --git a/tools/__tasks__/compile/javascript/webpack.dev.mjs b/tools/__tasks__/compile/javascript/webpack.dev.mjs index b042ef276ec..9846d13832a 100644 --- a/tools/__tasks__/compile/javascript/webpack.dev.mjs +++ b/tools/__tasks__/compile/javascript/webpack.dev.mjs @@ -2,7 +2,7 @@ import { Observable } from 'rxjs'; import webpack from 'webpack'; import chalk from 'chalk'; -import config from '../../../../webpack.config.dev.mjs'; +import config from '../../../../webpack.config.dev.cjs'; import { reporter } from './webpack-progress-reporter.mjs'; export default { diff --git a/tools/__tasks__/compile/javascript/webpack.mjs b/tools/__tasks__/compile/javascript/webpack.mjs index 12bc8edadcc..162c0d07adc 100644 --- a/tools/__tasks__/compile/javascript/webpack.mjs +++ b/tools/__tasks__/compile/javascript/webpack.mjs @@ -2,7 +2,7 @@ import { Observable } from 'rxjs'; import webpack from 'webpack'; import chalk from 'chalk'; -import config from '../../../../webpack.config.prod.mjs'; +import config from '../../../../webpack.config.prod.cjs'; import { reporter } from './webpack-progress-reporter.mjs'; export default { diff --git a/webpack.config.atoms.cjs b/webpack.config.atoms.cjs new file mode 100644 index 00000000000..a99cf1f7438 --- /dev/null +++ b/webpack.config.atoms.cjs @@ -0,0 +1,36 @@ +const path = require('path'); +const webpackMerge = require('webpack-merge'); +const TerserPlugin = require('terser-webpack-plugin'); + +const config = require('./webpack.config.cjs'); + +// Blatantly override JS entry points +config.entry = { + snippet: path.join( + __dirname, + 'static', + 'src', + 'javascripts', + 'bootstraps', + 'atoms', + 'snippet.js', + ), +}; + +module.exports = webpackMerge.smart(config, { + devtool: 'source-map', + output: { + filename: `[chunkhash]/graun.[name].js`, + chunkFilename: `[chunkhash]/graun.[name].js`, + }, + optimization: { + minimizer: [ + new TerserPlugin({ + parallel: true, + terserOptions: { + sourceMap: true, + }, + }), + ], + }, +}); diff --git a/webpack.config.atoms.mjs b/webpack.config.atoms.mjs deleted file mode 100644 index af1e8fa64ed..00000000000 --- a/webpack.config.atoms.mjs +++ /dev/null @@ -1,38 +0,0 @@ -import { join, dirname } from 'node:path'; -import { fileURLToPath } from 'node:url'; -import { smart } from 'webpack-merge'; -import TerserPlugin from 'terser-webpack-plugin'; - -import config from './webpack.config.mjs'; - -console.info("dirname", dirname(fileURLToPath(import.meta.url))) - -export default smart(config, { - // Blatantly override JS entry points - entry: { - snippet: join( - dirname(fileURLToPath(import.meta.url)), - 'static', - 'src', - 'javascripts', - 'bootstraps', - 'atoms', - 'snippet.js', - ), - }, - devtool: 'source-map', - output: { - filename: `[chunkhash]/graun.[name].js`, - chunkFilename: `[chunkhash]/graun.[name].js`, - }, - optimization: { - minimizer: [ - new TerserPlugin({ - parallel: true, - terserOptions: { - sourceMap: true, - }, - }), - ], - }, -}); diff --git a/webpack.config.cjs b/webpack.config.cjs new file mode 100644 index 00000000000..4242c6a00f7 --- /dev/null +++ b/webpack.config.cjs @@ -0,0 +1,150 @@ +const path = require('path'); +const CircularDependencyPlugin = require('circular-dependency-plugin'); +const webpack = require('webpack'); +const CopyPlugin = require("copy-webpack-plugin"); + +module.exports = { + entry: { + standard: path.join( + __dirname, + 'static', + 'src', + 'javascripts', + 'boot.js' + ), + admin: path.join( + __dirname, + 'static', + 'src', + 'javascripts', + 'bootstraps', + 'admin.js' + ), + // Old VideoJS embed + 'videojs-embed': path.join( + __dirname, + 'static', + 'src', + 'javascripts', + 'bootstraps', + 'videojs-embed.js' + ), + // Video embed with native video player enhancements + 'video-embed': path.join( + __dirname, + 'static', + 'src', + 'javascripts', + 'bootstraps', + 'video-embed.js' + ), + 'youtube-embed': path.join( + __dirname, + 'static', + 'src', + 'javascripts', + 'bootstraps', + 'youtube-embed.ts' + ), + }, + output: { + path: path.join(__dirname, 'static', 'target', 'javascripts'), + }, + resolve: { + modules: [ + path.join(__dirname, 'static', 'src', 'javascripts'), + path.join(__dirname, 'static', 'vendor', 'javascripts'), + 'node_modules', // default location, but we're overiding above, so it needs to be explicit + ], + alias: { + admin: 'projects/admin', + common: 'projects/common', + facia: 'projects/facia', + membership: 'projects/membership', + commercial: 'projects/commercial', + journalism: 'projects/journalism', + + // #wp-rjs weird old aliasing from requirejs + videojs: 'video.js', + + svgs: path.join(__dirname, 'static', 'src', 'inline-svgs'), + 'ophan/ng': 'ophan-tracker-js', + 'ophan/embed': 'ophan-tracker-js/build/ophan.embed', + lodash: 'lodash-es', + "react": "preact/compat", + "react-dom/test-utils": "preact/test-utils", + "react-dom": "preact/compat", + }, + extensions: ['.js', '.ts', '.tsx', '.jsx'], + symlinks: false, // Inserted to enable linking @guardian/consent-management-platform + }, + resolveLoader: { + modules: [ + path.resolve(__dirname, 'dev', 'webpack-loaders'), + path.resolve( + __dirname, + 'node_modules', + '@guardian', + 'node_modules' + ), + 'node_modules', + ], + }, + module: { + rules: [ + { + test: /\.[jt]sx?|mjs$/, + exclude: { + or: [/node_modules/, path.resolve(__dirname, 'static/vendor')], + not: [ + // Include all @guardian modules, except automat-modules + /@guardian\/(?!(automat-modules|automat-contributions))/, + // Include the dynamic-import-polyfill + /dynamic-import-polyfill/, + ], + }, + use: [ + { + loader: 'babel-loader', + }, + { + loader: 'ts-loader', + options: { + transpileOnly: true, + }, + }, + ] + }, + { + test: /\.svg$/, + exclude: /(node_modules)/, + loader: 'svg-loader', + }, + { + test: /\.(html|css)$/, + exclude: /(node_modules)/, + loader: 'raw-loader', + }, + ], + }, + plugins: [ + // Makes videosjs available to all modules in the videojs chunk. + // videojs plugins expect this object to be available globally, + // but it's sufficient to scope it at the chunk level + new webpack.ProvidePlugin({ + videojs: 'videojs', + }), + new CircularDependencyPlugin({ + // exclude detection of files based on a RegExp + exclude: /node_modules/, + // add errors to webpack instead of warnings + failOnError: true, + }), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), + }), + ], + externals: { + xhr2: {}, + }, +}; diff --git a/webpack.config.dev.cjs b/webpack.config.dev.cjs new file mode 100644 index 00000000000..c3c41d90dd5 --- /dev/null +++ b/webpack.config.dev.cjs @@ -0,0 +1,26 @@ +const webpackMerge = require('webpack-merge'); +const config = require('./webpack.config.cjs'); +const CopyPlugin = require("copy-webpack-plugin"); + +module.exports = webpackMerge.smart(config, { + devtool: 'inline-source-map', + mode: 'development', + output: { + filename: `graun.[name].js`, + chunkFilename: `graun.[name].js`, + clean: true, + }, + plugins: [ + // Copy the commercial bundle dist to Frontend's static output location: + // static/target/javascripts/commercial + // In development mode the hashed directory structure is discarded and all files are copied to '/commercial' + new CopyPlugin({ + patterns: [ + { + from: "node_modules/@guardian/commercial/dist/bundle/dev", + to: "commercial" + }, + ], + }), + ], +}); diff --git a/webpack.config.dev.mjs b/webpack.config.dev.mjs deleted file mode 100644 index af78c6807e9..00000000000 --- a/webpack.config.dev.mjs +++ /dev/null @@ -1,26 +0,0 @@ -import { smart } from 'webpack-merge'; -import config from './webpack.config.mjs'; -import CopyPlugin from 'copy-webpack-plugin'; - -export default smart(config, { - devtool: 'inline-source-map', - mode: 'development', - output: { - filename: `graun.[name].js`, - chunkFilename: `graun.[name].js`, - clean: true, - }, - plugins: [ - // Copy the commercial bundle dist to Frontend's static output location: - // static/target/javascripts/commercial - // In development mode the hashed directory structure is discarded and all files are copied to '/commercial' - new CopyPlugin({ - patterns: [ - { - from: 'node_modules/@guardian/commercial/dist/bundle/dev', - to: 'commercial', - }, - ], - }), - ], -}); diff --git a/webpack.config.mjs b/webpack.config.mjs deleted file mode 100644 index bcb23266c72..00000000000 --- a/webpack.config.mjs +++ /dev/null @@ -1,140 +0,0 @@ -import { join, resolve, dirname } from 'node:path'; -import { fileURLToPath } from 'node:url'; -import CircularDependencyPlugin from 'circular-dependency-plugin'; -import webpack from 'webpack'; - -const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file -const __dirname = dirname(__filename); // get the name of the directory - -export default { - entry: { - standard: join(__dirname, 'static', 'src', 'javascripts', 'boot.js'), - admin: join( - __dirname, - 'static', - 'src', - 'javascripts', - 'bootstraps', - 'admin.js', - ), - // Old VideoJS embed - 'videojs-embed': join( - __dirname, - 'static', - 'src', - 'javascripts', - 'bootstraps', - 'videojs-embed.js', - ), - // Video embed with native video player enhancements - 'video-embed': join( - __dirname, - 'static', - 'src', - 'javascripts', - 'bootstraps', - 'video-embed.js', - ), - 'youtube-embed': join( - __dirname, - 'static', - 'src', - 'javascripts', - 'bootstraps', - 'youtube-embed.ts', - ), - }, - output: join(__dirname, 'static', 'target', 'javascripts'), - resolve: { - modules: [ - join(__dirname, 'static', 'src', 'javascripts'), - join(__dirname, 'static', 'vendor', 'javascripts'), - 'node_modules', // default location, but we're overiding above, so it needs to be explicit - ], - alias: { - admin: 'projects/admin', - common: 'projects/common', - facia: 'projects/facia', - membership: 'projects/membership', - commercial: 'projects/commercial', - journalism: 'projects/journalism', - - // #wp-rjs weird old aliasing from requirejs - videojs: 'video.js', - - svgs: join(__dirname, 'static', 'src', 'inline-svgs'), - 'ophan/ng': 'ophan-tracker-js', - 'ophan/embed': 'ophan-tracker-js/build/ophan.embed', - lodash: 'lodash-es', - react: 'preact/compat', - 'react-dom/test-utils': 'preact/test-utils', - 'react-dom': 'preact/compat', - }, - extensions: ['.js', '.ts', '.tsx', '.jsx'], - symlinks: false, // Inserted to enable linking @guardian/consent-management-platform - }, - resolveLoader: { - modules: [ - resolve(__dirname, 'dev', 'webpack-loaders'), - resolve(__dirname, 'node_modules', '@guardian', 'node_modules'), - 'node_modules', - ], - }, - module: { - rules: [ - { - test: /\.[jt]sx?|mjs$/, - exclude: { - or: [/node_modules/, resolve(__dirname, 'static/vendor')], - not: [ - // Include all @guardian modules, except automat-modules - /@guardian\/(?!(automat-modules|automat-contributions))/, - // Include the dynamic-import-polyfill - /dynamic-import-polyfill/, - ], - }, - use: [ - { - loader: 'babel-loader', - }, - { - loader: 'ts-loader', - options: { - transpileOnly: true, - }, - }, - ], - }, - { - test: /\.svg$/, - exclude: /(node_modules)/, - loader: 'svg-loader', - }, - { - test: /\.(html|css)$/, - exclude: /(node_modules)/, - loader: 'raw-loader', - }, - ], - }, - plugins: [ - // Makes videosjs available to all modules in the videojs chunk. - // videojs plugins expect this object to be available globally, - // but it's sufficient to scope it at the chunk level - new webpack.ProvidePlugin({ - videojs: 'videojs', - }), - new CircularDependencyPlugin({ - // exclude detection of files based on a RegExp - exclude: /node_modules/, - // add errors to webpack instead of warnings - failOnError: true, - }), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), - }), - ], - externals: { - xhr2: {}, - }, -}; diff --git a/webpack.config.prod.mjs b/webpack.config.prod.cjs similarity index 72% rename from webpack.config.prod.mjs rename to webpack.config.prod.cjs index b327def2b25..bbc9f6c5da7 100644 --- a/webpack.config.prod.mjs +++ b/webpack.config.prod.cjs @@ -1,17 +1,18 @@ -import webpack from 'webpack'; -import { smart } from 'webpack-merge'; -import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; -import TerserPlugin from 'terser-webpack-plugin'; -import CopyPlugin from 'copy-webpack-plugin'; +const webpack = require('webpack'); +const webpackMerge = require('webpack-merge'); +const BundleAnalyzerPlugin = + require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const TerserPlugin = require('terser-webpack-plugin'); +const CopyPlugin = require('copy-webpack-plugin'); -import config from './webpack.config.mjs'; +const config = require('./webpack.config.cjs'); -export default smart(config, { +module.exports = webpackMerge.smart(config, { mode: 'production', output: { filename: `[chunkhash]/graun.[name].js`, chunkFilename: `[chunkhash]/graun.[name].js`, - clean: true, + clean: true, }, devtool: 'source-map', plugins: [