Skip to content

refactor(site): webpack configuration #870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 4, 2022
Merged

refactor(site): webpack configuration #870

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 71 additions & 29 deletions site/webpack.common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,72 @@
* be shared between development and production.
*/

import * as path from "path"
import { Configuration } from "webpack"
import HtmlWebpackPlugin from "html-webpack-plugin"
import * as path from "path"
import { Configuration, EnvironmentPlugin } from "webpack"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NTS, one of the items i didn't get to on gap week was adding the plugin for ordering imports. I will add this in a follow-up


/**
* environmentPlugin sets process.env.* variables so that they're available in
* the application.
*/
const environmentPlugin = new EnvironmentPlugin({
INSPECT_XSTATE: "",
})
console.info(`--- Setting INSPECT_XSTATE to '${process.env.INSPECT_XSTATE || ""}'`)
console.info(`--- Setting NODE_ENV to '${process.env.NODE_ENV || ""}'`)

/**
* dashboardEntrypoint is the top-most module in the dashboard chunk.
*/
const dashboardEntrypoint = path.join(__dirname, "src/Main.tsx")

/**
* templatePath is the path to HTML templates for injecting webpack bundles
*/
const templatePath = path.join(__dirname, "html_templates")

const plugins = [
// The HTML webpack plugin tells webpack to use our `index.html` and inject
// the bundle script, which might have special naming.
new HtmlWebpackPlugin({
template: path.join(templatePath, "index.html"),
publicPath: "/",
}),
]
/**
* dashboardHTMLPluginConfig is the HtmlWebpackPlugin configuration for the
* dashboard chunk.
*/
const dashboardHTMLPluginConfig = new HtmlWebpackPlugin({
publicPath: "/",
template: path.join(templatePath, "index.html"),
})

export const commonWebpackConfig: Configuration = {
// entry defines each "page" or "chunk". Currently, for v2, we only have one bundle -
// a bundle that is shared across all of the UI. However, we may need to eventually split
// like in v1, where there is a separate entry piont for dashboard & terminal.
entry: path.join(__dirname, "src/Main.tsx"),
// entry defines each "page" or "chunk". In v1, we have two "pages":
// dashboard and terminal. This is desired because the terminal has the xterm
// vendor, and it is undesireable to load all of xterm on a dashboard
// page load.
//
// The object key determines the chunk 'name'. This can be used in `output`
// to create a final bundle name.
//
// REMARK: We may need to further vendorize the pieces shared by the chunks
// such as React, ReactDOM. This is not yet _optimized_, but having
// them split means less initial load on dashboard page load.
entry: dashboardEntrypoint,

// output defines the name and location of the final bundle
output: {
// The chunk name along with a hash of its content will be used for the
// generated bundle name.
//
// REMARK: It's important to use [contenthash] here to invalidate caches.
filename: "bundle.[contenthash].js",
path: path.resolve(__dirname, "out"),
},

// modules specify how different modules are loaded
// See: https://webpack.js.org/concepts/modules/
module: {
rules: [
// TypeScript (ts, tsx) files use ts-loader for simplicity.
//
// REMARK: We may want to configure babel-loader later on for further
// optimization (build time, tree-shaking). babel-loader on its
// own does not run type checks.
{
test: /\.tsx?$/,
use: [
Expand All @@ -38,28 +79,29 @@ export const commonWebpackConfig: Configuration = {
},
},
],
exclude: [/node_modules/],
exclude: /node_modules/,
},

// REMARK: webpack 5 asset modules
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
],
},

// resolve extend/modify how modules are resolved.
//
// REMARK: Do not add aliases here, unless they cannot be defined in a
// tsconfig file (see TSConfigWebpackPlugin).
resolve: {
// Let webpack know to consider ts/tsx files for bundling
// extensions are attempted in order and enable importing files without
// the extensions explicitly stated
//
// See: https://webpack.js.org/guides/typescript/
extensions: [".tsx", ".ts", ".js"],
},

// output defines the name and location of the final bundle
output: {
// The chunk name along with a hash of its content will be used for the
// generated bundle name.
//
// REMARK: It's important to use [contenthash] here to invalidate caches.
filename: "bundle.[contenthash].js",
path: path.resolve(__dirname, "out"),
},

plugins: plugins,

target: "web",
// plugins customize the build process
plugins: [environmentPlugin, dashboardHTMLPluginConfig],
}