{"id":27701,"library":"dn-middleware-webpack5","title":"Dawn Middleware Webpack5","description":"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.","status":"active","version":"1.1.36","language":"javascript","source_language":"en","source_url":"https://github.com/alibaba/dawn","tags":["javascript","dawn","middleware"],"install":[{"cmd":"npm install dn-middleware-webpack5","lang":"bash","label":"npm"},{"cmd":"yarn add dn-middleware-webpack5","lang":"bash","label":"yarn"},{"cmd":"pnpm add dn-middleware-webpack5","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Babel integration for transpilation; configured via jsxRuntime option","package":"@dawnjs/dn-middleware-babel","optional":true},{"reason":"Core Webpack 5 bundler; peer dependency expected","package":"webpack","optional":true}],"imports":[{"note":"In Dawn pipe.yml, use 'webpack5' as the middleware name, not 'webpack', to invoke this package.","wrong":"name: webpack","symbol":"webpack5","correct":"name: webpack5"},{"note":"Valid env values are 'development' (default) or 'production', not other aliases.","wrong":"env: \"prod\"","symbol":"env","correct":"env: \"production\""},{"note":"esbuild.minify accepts boolean or object; object is passed directly to ESBuildMinifyPlugin options.","wrong":"esbuild:\n  minify: { config: true }","symbol":"esbuild.minify","correct":"esbuild:\n  minify: true"},{"note":"moduleFederation expects an object with standard Webpack ModuleFederationPlugin options, not a string.","wrong":"moduleFederation: 'myapp'","symbol":"moduleFederation","correct":"moduleFederation:\n  name: 'myapp'\n  remotes: {}\n  exposes: {}"}],"quickstart":{"code":"# Install the middleware - remove old webpack middleware if upgrading\nnpm uninstall dn-middleware-webpack -D && npm install dn-middleware-webpack5 -D\n\n# pipe.yml example for development\n# .dawn/pipe.yml\ndev:\n  - name: webpack5\n    watch: true\n    env: development\n    entry: src/index.tsx\n    template: public/index.html\n  - name: server\n  - name: browser-sync\n\n# pipe.yml example for production build\nbuild:\n  - name: webpack5\n    env: production\n    compress: true\n    devtool: false\n    output: /build\n","lang":"yaml","description":"Basic setup of webpack5 middleware in Dawn pipeline config files for development with hot reload and production build."},"warnings":[{"fix":"Set compress: false in webpack5 config when using another compress middleware.","message":"Ensure compress option is set to false if using a separate compress middleware to avoid double compression.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use devtool option instead of sourceMap.","message":"The sourceMap option (v4) has been replaced by devtool. Using sourceMap may still work but is discouraged.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Set compress: false and then configure terser or esbuild.minify as needed.","message":"In production mode, compression is enabled by default. If you want to customize Terser or use esbuild.minify, set compress to false first.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure moduleFederation is an object with valid Webpack ModuleFederationPlugin options.","message":"Module Federation configuration must be an object; passing a string or boolean will throw an error.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"npm uninstall dn-middleware-webpack -D && npm install dn-middleware-webpack5 -D, then change pipe.yml middleware name from 'webpack' to 'webpack5'.","message":"Migration from dn-middleware-webpack (Webpack 4) to dn-middleware-webpack5 requires removing the old package and updating pipe.yml to use 'webpack5' name.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Run 'npm install webpack --save-dev' to install webpack as a dev dependency.","cause":"webpack is not installed as a dependency or peer dependency.","error":"Error: Cannot find module 'webpack'"},{"fix":"Check the webpack5 configuration in pipe.yml for typos or wrong types. Refer to the documentation for valid options.","cause":"A configuration option is misspelled or has an incorrect type (e.g., compress set to a string instead of boolean).","error":"Error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."},{"fix":"Set entry explicitly in pipe.yml to the correct path, e.g., entry: src/index.tsx","cause":"Default entry src/index was not found; auto-detection failed.","error":"Error: Module not found: Error: Can't resolve 'src/index'"},{"fix":"Install '@dawnjs/dn-middleware-babel' as a dev dependency.","cause":"Babel middleware is missing but required for TypeScript/React transpilation.","error":"Error: Cannot find module '@dawnjs/dn-middleware-babel'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}