Registry / devops / webpack-tool

webpack-tool

JSON →
library5.0.5jsnpmunverified

webpack-tool is a utility library designed to streamline webpack development and production builds, integrating a Koa-based development server with hot module replacement and a production build mechanism that can optionally display a build result UI. It ties its major version releases directly to webpack's major versions (e.g., `webpack-tool@5.x.x` for `webpack@5`). This approach provides a consistent experience for developers working with specific webpack versions. Key differentiators include its built-in Koa dev server, which offers `before` and `after` hooks for custom middleware integration, a proxy configuration, and a history API fallback. It aims to simplify the boilerplate often associated with setting up webpack for both development and production environments, providing a consolidated API for `server` (development) and `build` (production) commands, along with a debug UI for build results.

devops
npm install webpack-tool
github ↗package ↗
INSTALL
IMPORT
SIG · WEBPACK-TOOL
W
webpack-tool
devopsjavascriptv5.0.5
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

WebpackTool
✓ const WebpackTool = require('webpack-tool');
✗ import WebpackTool from 'webpack-tool';
Primarily designed for CommonJS; direct ESM import might not work without a build step or explicit configuration, as shown in the README.
WebpackTool instance
✓ const webpackTool = new WebpackTool({...});
✗ const webpackTool = WebpackTool({...});
WebpackTool is a class, requiring the `new` keyword for instantiation.

This quickstart demonstrates how to instantiate `WebpackTool`, configure its dev server with custom Koa middleware, proxying, and history API fallback, and then conditionally start either the development server or a production build based on an environment variable. It also shows a minimal webpack configuration.

const WebpackTool = require('webpack-tool'); const path = require('path'); const crossEnv = require('cross-env'); // Simulate cross-env setup for demonstration process.env.VIEW = process.argv.includes('--dev') ? 'development' : 'production'; const webpackTool = new WebpackTool({ devServer: { port: 8080, before: (app) => { console.log('Registering custom Koa middleware (before)'); app.use(async (ctx, next) => { if (ctx.path === '/custom-api') { ctx.body = 'Hello from custom API!'; } else { await next(); } }); }, proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' }, onProxyReq: (proxyReq, req, res) => { console.log(`Proxying request: ${req.url}`); } } }, historyApiFallback: { index: '/index.html' } } }); const webpackConfig = { mode: process.env.VIEW === 'development' ? 'development' : 'production', entry: { index: path.resolve(__dirname, 'src/index.js') }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, plugins: [] }; if (process.env.VIEW === 'development') { console.log('Starting webpack development server on http://localhost:8080'); webpackTool.server(webpackConfig); } else { console.log('Starting webpack build for production'); // To view UI for build mode, set process.env.BUILD_VIEW = 'true'; // process.env.BUILD_VIEW = 'true'; webpackTool.build(webpackConfig).then(() => { console.log('Production build completed.'); }).catch(err => { console.error('Production build failed:', err); }); } // To make this runnable, ensure you have a src/index.js and babel setup. // Example src/index.js: // console.log('Hello from webpack-tool!'); // document.body.innerHTML = '<h1>Webpack-tool Demo</h1>'; // To run: // node build/index.js --dev (for dev server) // node build/index.js (for production build)
webpack-tool --version
Debug
Known issues
breakingMajor version of `webpack-tool` is tied directly to `webpack` major versions. Upgrading `webpack` (e.g., from v4 to v5) requires upgrading `webpack-tool` to the corresponding major version (e.g., from `webpack-tool@4.x.x` to `webpack-tool@5.x.x`).
fix
Always install `webpack-tool` with a version that matches your installed `webpack` major version (e.g., `npm i webpack-tool@^5.0.0 webpack@^5.0.0`).
affects: >=3.0.0
gotchaThe `devServer` configuration object for `webpack-tool` is a direct passthrough to webpack-dev-server options, but also includes custom `before` and `after` hooks which operate on a Koa application instance, not Express as `webpack-dev-server` typically does internally. Misunderstanding this can lead to incorrect middleware implementations.
fix
When using `devServer.before` or `devServer.after`, ensure your middleware functions are compatible with Koa's context and `async/await` pattern (`(ctx, next) => {...}`).
affects: >=3.0.0
gotchaThe build result UI view is not enabled by default for production builds. To see the UI after a production build, a specific environment variable `process.env.BUILD_VIEW` must be set to `true`.
fix
Set `process.env.BUILD_VIEW = true` before calling `webpackTool.build(webpackConfig)` if you want to inspect the build result UI.
affects: >=3.0.0
Errors
Common errors & fixes
Error: Webpack compilation failed: RangeError: Maximum call stack size exceeded
Often caused by complex or circular dependencies in the webpack configuration, or issues with loaders/plugins.
fix
Review webpack configuration, especially loaders and plugins. Check for circular dependencies in modules. Try simplifying the configuration or isolating the problematic part. Increase Node.js stack size if necessary, e.g., `node --stack-size=4000 build/index.js`.
TypeError: app.use is not a function
This error likely occurs within `devServer.before` or `devServer.after` when attempting to use middleware not compatible with Koa, or when `app` is not the expected Koa application instance.
fix
Ensure that the middleware provided to `before` or `after` is a valid Koa middleware function (taking `ctx` and `next` as arguments) and that the `app` object is indeed the Koa instance provided by `webpack-tool`.
Error: Cannot find module 'webpack-tool'
The `webpack-tool` package is not installed or not resolvable in the current project's `node_modules`.
fix
Run `npm install webpack-tool --save` or `yarn add webpack-tool` in your project directory. Verify the package is listed in `package.json` and present in `node_modules`.
Upgrade
Version history
5.0.5latest on npm
Audit
Dependencies
webpackrequiredCore dependency for build and dev server functionality; webpack-tool versions are aligned with webpack versions.
koarequiredUnderpins the development server for custom middleware and routing.
Agent activity
9 hits · last 30 days
node
8
Resources
githubhttps://github.com/easy-team/webpack-tool ↗
packagehttps://www.npmjs.com/package/webpack-tool ↗