revert: keep webpack CJS

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();
 

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;

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 {

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 {

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,
+				},
+			}),
+		],
+	},
+});

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: {},
+    },
+};

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"
+              },
+            ],
+        }),
+    ],
+});