Dawn Middleware Webpack5

1.1.36 verified Sat May 09 auth: no javascript

A Dawn middleware that wraps Webpack 5 for building web applications, part of the Dawn toolkit by Alibaba. Version 1.1.36 (stable, last published 2022) provides full Webpack 5 support including Module Federation, Fast Refresh, ESBuild minification, and smart defaults for entry, output, and TypeScript compilation. Designed specifically for the Dawn pipeline (pipe.yml) workflow, it simplifies configuration by auto-detecting project structure. Compared to standalone Webpack usage, this middleware integrates with Dawn's task runner, server, and browser-sync plugins. Release cadence is low; maintained by Alibaba team. Requires Node.js >=10.13.

Common errors

error Error: Cannot find module 'webpack' ↓

cause webpack is not installed as a dependency or peer dependency.

fix

Run 'npm install webpack --save-dev' to install webpack as a dev dependency.

error Error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause A configuration option is misspelled or has an incorrect type (e.g., compress set to a string instead of boolean).

fix

Check the webpack5 configuration in pipe.yml for typos or wrong types. Refer to the documentation for valid options.

error Error: Module not found: Error: Can't resolve 'src/index' ↓

cause Default entry src/index was not found; auto-detection failed.

fix

Set entry explicitly in pipe.yml to the correct path, e.g., entry: src/index.tsx

error Error: Cannot find module '@dawnjs/dn-middleware-babel' ↓

cause Babel middleware is missing but required for TypeScript/React transpilation.

fix

Install '@dawnjs/dn-middleware-babel' as a dev dependency.

Warnings

gotcha Ensure compress option is set to false if using a separate compress middleware to avoid double compression. ↓

fix Set compress: false in webpack5 config when using another compress middleware.

deprecated The sourceMap option (v4) has been replaced by devtool. Using sourceMap may still work but is discouraged. ↓

fix Use devtool option instead of sourceMap.

gotcha In production mode, compression is enabled by default. If you want to customize Terser or use esbuild.minify, set compress to false first. ↓

fix Set compress: false and then configure terser or esbuild.minify as needed.

gotcha Module Federation configuration must be an object; passing a string or boolean will throw an error. ↓

fix Ensure moduleFederation is an object with valid Webpack ModuleFederationPlugin options.

breaking Migration from dn-middleware-webpack (Webpack 4) to dn-middleware-webpack5 requires removing the old package and updating pipe.yml to use 'webpack5' name. ↓

fix npm uninstall dn-middleware-webpack -D && npm install dn-middleware-webpack5 -D, then change pipe.yml middleware name from 'webpack' to 'webpack5'.

Install

npm install dn-middleware-webpack5

yarn add dn-middleware-webpack5

pnpm add dn-middleware-webpack5

Imports

webpack5
wrong
```
name: webpack
```
correct
```
name: webpack5
```
In Dawn pipe.yml, use 'webpack5' as the middleware name, not 'webpack', to invoke this package.
env
wrong
```
env: "prod"
```
correct
```
env: "production"
```
Valid env values are 'development' (default) or 'production', not other aliases.
esbuild.minify
wrong
```
esbuild:
  minify: { config: true }
```
correct
```
esbuild:
  minify: true
```
esbuild.minify accepts boolean or object; object is passed directly to ESBuildMinifyPlugin options.
moduleFederation
wrong
```
moduleFederation: 'myapp'
```
correct
```
moduleFederation:
  name: 'myapp'
  remotes: {}
  exposes: {}
```
moduleFederation expects an object with standard Webpack ModuleFederationPlugin options, not a string.

Quickstart

Basic setup of webpack5 middleware in Dawn pipeline config files for development with hot reload and production build.

# Install the middleware - remove old webpack middleware if upgrading
npm uninstall dn-middleware-webpack -D && npm install dn-middleware-webpack5 -D

# pipe.yml example for development
# .dawn/pipe.yml
dev:
  - name: webpack5
    watch: true
    env: development
    entry: src/index.tsx
    template: public/index.html
  - name: server
  - name: browser-sync

# pipe.yml example for production build
build:
  - name: webpack5
    env: production
    compress: true
    devtool: false
    output: /build