[Backport 1.x] (security): update webpack-dev-server to address cves

package.json

@@ -12,7 +12,7 @@
     "*.scss"
   ],
   "scripts": {
-    "start": "cross-env BABEL_MODULES=false webpack-dev-server --inline --hot --config=src-docs/webpack.config.js",
+    "start": "cross-env BABEL_MODULES=false webpack-dev-server --hot --config=src-docs/webpack.config.js",
     "test-docker": "node ./scripts/test-docker.js",
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
@@ -50,6 +50,7 @@
     "@babel/cli/chokidar/glob-parent": "^6.0.1",
     "@elastic/charts/**/d3-color": "^3.1.0",
     "@types/jest/**/ansi-regex": "^5.0.1",
+    "@types/ws": "8.5.4",
     "babel-plugin-add-module-exports/chokidar/glob-parent": "^6.0.1",
     "babel-plugin-inline-react-svg/**/ansi-regex": "^5.0.1",
     "babel-plugin-inline-react-svg/svgo/js-yaml": "^3.13.1",
@@ -78,9 +79,6 @@
     "sass-lint/merge": "^2.1.1",
     "start-server-and-test/**/minimist": "^1.2.6",
     "start-server-and-test/wait-on": "^7.1.0",
-    "webpack-dev-server/**/ansi-regex": "^5.0.1",
-    "webpack-dev-server/chokidar/glob-parent": "^6.0.1",
-    "webpack-dev-server/selfsigned": "^2.0.1",
     "webpack/**/chokidar/glob-parent": "^6.0.1",
     "webpack/terser-webpack-plugin/serialize-javascript": "^3.1.0",
     "yo/**/find-versions": "^4.0.0",
@@ -239,8 +237,8 @@
     "typescript": "4.6.4",
     "url-loader": "^4.1.0",
     "webpack": "npm:@amoo-miki/[email protected]",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.2",
     "yeoman-generator": "^5.8.0",
     "yo": "^4.3.1"
   },

scripts/compile-charts.js

@@ -35,12 +35,8 @@ const dtsGenerator = require('dts-generator').default;
 
 function compileChartsBundle() {
   console.log('Building chart theme module...');
-  execSync(
-    'webpack src/themes/charts/themes.ts -o dist/oui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js',
-    {
-      stdio: 'inherit',
-    }
-  );
+  webpackCompile('oui_charts_theme.js');
+
   dtsGenerator({
     prefix: '',
     out: 'dist/oui_charts_theme.d.ts',
@@ -58,12 +54,8 @@ function compileChartsBundle() {
   });
 
   /* OUI -> EUI Aliases */
-  execSync(
-    'webpack src/themes/charts/themes.ts -o dist/eui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js',
-    {
-      stdio: 'inherit',
-    }
-  );
+  webpackCompile('eui_charts_theme.js');
+
   dtsGenerator({
     prefix: '',
     out: 'dist/eui_charts_theme.d.ts',
@@ -84,4 +76,17 @@ function compileChartsBundle() {
   console.log(chalk.green('✔ Finished chart theme module'));
 }
 
+function webpackCompile(outputFilename) {
+  execSync(
+    `webpack ${path.join(__dirname, '../src/themes/charts/themes.ts')} \
+        -o dist \
+        --config=src/webpack.config.js \
+        --env filename=${outputFilename} \
+        --env library-target=commonjs`,
+    {
+      stdio: 'inherit',
+    }
+  );
+}
+
 compileChartsBundle();

src-docs/webpack.config.js

@@ -10,6 +10,7 @@
  */
 
 const path = require('path');
+const { ProvidePlugin } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const babelConfig = require('./.babelrc.js');
@@ -132,11 +133,13 @@ const webpackConfig = {
       failOnError: true,
     }),
 
-    // run TypeScript during webpack build
-    // new ForkTsCheckerWebpackPlugin({
-    //   typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
-    //   async: false, // makes errors more visible, but potentially less performant
-    // }),
+    new ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+
+    new ProvidePlugin({
+      process: 'process/browser',
+    }),
   ],
 
   devServer: isDevelopment

src/webpack.config.js

@@ -60,7 +60,7 @@ const terserPlugin = new TerserPlugin({
   sourceMap: true,
 });
 
-module.exports = {
+module.exports = (env) => ({
   mode: isProduction ? 'production' : 'development',
 
   devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
@@ -73,7 +73,8 @@ module.exports = {
 
   output: {
     path: path.resolve(__dirname, '../dist'),
-    filename: `oui${isProduction ? '.min' : ''}.js`,
+    filename: env.filename || `oui${isProduction ? '.min' : ''}.js`,
+    libraryTarget: env['library-target'] || undefined,
   },
 
   resolve: {
@@ -115,4 +116,4 @@ module.exports = {
     minimizer: [terserPlugin],
     noEmitOnErrors: true,
   },
-};
+});