chore(examples): use module format for Webpack (#69)

carbon-design-system · Oct 27, 2024 · 9df2225 · 9df2225
1 parent 9e8d749
commit 9df2225
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 18 deletions.
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -1,5 +1,6 @@
 {
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "webpack serve",
     "build": "NODE_ENV=production webpack"

diff --git a/examples/webpack/webpack.config.js → examples/webpack/webpack.config.mjs b/examples/webpack/webpack.config.js → examples/webpack/webpack.config.mjs
@@ -1,27 +1,29 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const path = require("path");
+// @ts-check
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import path from "node:path";
+import carbonPreprocess from "carbon-preprocess-svelte";
+
 const {
   optimizeImports,
   OptimizeCssPlugin,
-} = require("carbon-preprocess-svelte");
+} = carbonPreprocess;
 
-const NODE_ENV = process.env.NODE_ENV || "development";
+/** @type {"development" | "production"} */
+const NODE_ENV =
+  process.env.NODE_ENV === "production" ? "production" : "development";
 const PROD = NODE_ENV === "production";
 
-module.exports = {
+/** @type {import("webpack").Configuration} */
+export default {
   entry: { "build/bundle": ["./src/index.js"] },
   resolve: {
-    alias: {
-      svelte: path.resolve("node_modules", "svelte/src/runtime"),
-    },
     extensions: [".mjs", ".js", ".svelte"],
-    mainFields: ["svelte", "browser", "module", "main"],
     conditionNames: ["svelte", "browser", "import"],
   },
   output: {
     publicPath: "/",
-    path: path.join(__dirname, "/public"),
+    path: path.resolve("./public"),
     filename: PROD ? "[name].[contenthash].js" : "[name].js",
     chunkFilename: "[name].[id].js",
     clean: true,

diff --git a/examples/webpack@svelte-5/package.json b/examples/webpack@svelte-5/package.json
@@ -1,5 +1,6 @@
 {
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "webpack serve",
     "build": "NODE_ENV=production webpack"

diff --git a/examples/webpack@svelte-5/webpack.config.js → examples/webpack@svelte-5/webpack.config.mjs b/examples/webpack@svelte-5/webpack.config.js → examples/webpack@svelte-5/webpack.config.mjs
@@ -1,23 +1,29 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const path = require("path");
+// @ts-check
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import path from "node:path";
+import carbonPreprocess from "carbon-preprocess-svelte";
+
 const {
   optimizeImports,
   OptimizeCssPlugin,
-} = require("carbon-preprocess-svelte");
+} = carbonPreprocess;
 
-const NODE_ENV = process.env.NODE_ENV || "development";
+/** @type {"development" | "production"} */
+const NODE_ENV =
+  process.env.NODE_ENV === "production" ? "production" : "development";
 const PROD = NODE_ENV === "production";
 
-module.exports = {
+/** @type {import("webpack").Configuration} */
+export default {
   entry: { "build/bundle": ["./src/index.js"] },
   resolve: {
     extensions: [".mjs", ".js", ".svelte"],
     conditionNames: ["svelte", "browser", "import"],
   },
   output: {
     publicPath: "/",
-    path: path.join(__dirname, "/public"),
+    path: path.resolve("./public"),
     filename: PROD ? "[name].[contenthash].js" : "[name].js",
     chunkFilename: "[name].[id].js",
     clean: true,