Functions that you can compose to build the perfect Webpack configuration. These functions bake in best practices, so you can stop copy-pasting them from the internet!
View the API documentation here
$ yarn add @stackup/webpack --dev
Add the following to your package.json
.
{
// ...
"scripts": {
"start": "webpack serve",
"build": "webpack --env production"
}
// ...
}
After adding this configuration, you can run:
yarn start
to start the development serveryarn build
to create a production build
This library ships with a Babel preset to get you up and running quickly.
To configure Babel, add the following to your package.json
:
{
// ...
"babel": {
"presets": ["@stackup/webpack/babel-preset"]
}
// ...
}
This library provides a set of functions that can be composed to generate a production-ready webpack configuration file.
You can get started by copying the example here.
const path = require("path");
const webpack = require("@stackup/webpack");
module.exports = webpack.pipeline([
// Set your entrypoint
webpack.entry("./src/index.tsx"),
// Output to `dist/`
webpack.output({
path: path.join(__dirname, "dist"),
publicPath: "/",
}),
// More configuration goes here...
]);
To use TypeScript, just install it:
$ yarn add typescript --dev
Then, create a tsconfig.json
file:
{
"include": ["src", "types"],
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"jsx": "preserve",
"lib": ["dom", "dom.iterable", "esnext"],
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"isolatedModules": true,
"forceConsistentCasingInFileNames": true
}
}
The target
, module
, moduleResolution
, and jsx
are especially important.
Those settings above instruct TypeScript to let Babel do the heavy lifting.
First, specify which browsers you want your application to support in your package.json
:
{
// ...
"browserslist": {
"production": [">0.2%", "not dead", "not op_mini all"],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
// ...
}
Next, insert the following line at the very top of your entrypoint:
import "core-js/stable";
The Babel preset that ships with @stackup/webpack
will translate that import to a bunch of smaller imports based on your browserlist and the features that you application actually depends on. So, after compilation, it might look something like this:
import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
Note: This feature is experimental.
To support fast refresh for React applications, you'll need to update your Babel configuration:
{
// ...
"babel": {
"presets": [["@stackup/webpack/babel-preset", { "refresh": true }]]
}
// ...
}
Then, you'll need to enable fast refresh in your webpack configuration:
import * as webpack from "@stackup/webpack";
module.exports = webpack.pipeline([
// ...
webpack.refresh(),
// ...
]);