feat: migrate to vite [WIP]

CONTRIBUTING.md

@@ -82,8 +82,7 @@ Then, start the dev-server by running:
 npm start
 ```
 
-This will open a webpack-dev-server at http://localhost:8080 and watch
-for file changes.
+This will start the vite dev server at http://localhost:8080 with HMR.
 
 ### Quick rebuild
 

build-tools/tasks/a11y.js

@@ -13,7 +13,7 @@ module.exports = task('test:a11y', async () => {
     },
   };
   const shard = parseArgs({ options, strict: false }).values.shard;
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
+  const devServer = execa('vite', ['--config', 'vite.config.integ.js'], {
     env: {
       NODE_ENV: 'development',
     },

build-tools/tasks/build-pages.js

@@ -1,23 +1,22 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 const { cpSync } = require('node:fs');
-const { promisify } = require('util');
-const webpack = require('webpack');
+const { build } = require('vite');
 const { parallel } = require('gulp');
 const path = require('path');
 const { mkdirSync, existsSync } = require('fs');
-const createConfig = require('../../pages/webpack.config.cjs');
 const { task } = require('../utils/gulp-utils');
 const workspace = require('../utils/workspace');
 
-const asyncWebpack = promisify(webpack);
-
 async function buildPagesStatic() {
-  const stats = await asyncWebpack(createConfig());
-
-  console.log(stats.toString({ colors: true }));
-  if (stats.hasErrors()) {
-    throw new Error('Error while running webpack');
+  try {
+    await build({
+      configFile: path.resolve(__dirname, '../../vite.config.js'),
+      mode: 'production',
+    });
+  } catch (error) {
+    console.error('Error while running vite build:', error);
+    throw error;
   }
 }
 

build-tools/tasks/integ.js

@@ -12,7 +12,7 @@ module.exports = task('test:integ', async () => {
     reactVersion: { type: 'string' },
   };
   const { shard, reactVersion = '16' } = parseArgs({ options, strict: false }).values;
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
+  const devServer = execa('vite', ['--config', 'vite.config.integ.js'], {
     env: {
       NODE_ENV: 'development',
       REACT_VERSION: reactVersion,

build-tools/tasks/motion.js

@@ -11,7 +11,7 @@ module.exports = task('test:motion', async () => {
     reactVersion: { type: 'string' },
   };
   const { reactVersion = '16' } = parseArgs({ options, strict: false }).values;
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
+  const devServer = execa('vite', ['--config', 'vite.config.integ.js'], {
     env: {
       NODE_ENV: 'development',
       REACT_VERSION: reactVersion,

eslint.config.mjs

@@ -137,7 +137,7 @@ export default tsEslint.config(
     },
   },
   {
-    files: ['.github/**', 'build-tools/**', 'scripts/**', 'pages/webpack.*', 'jest.*.js', 'gulpfile.js'],
+    files: ['.github/**', 'build-tools/**', 'scripts/**', 'jest.*.js', 'gulpfile.js'],
     languageOptions: {
       globals: {
         ...globals.node,