Compare Webpack Configurations Online
Paste two webpack config files. See differences in loaders, plugins, optimization settings, and build configuration.
🔒 100% private — runs entirely in your browseror try sample data
Paste two webpack config files. See differences in loaders, plugins, optimization settings, and build configuration.
🔒 100% private — runs entirely in your browseror try sample data
Webpack Config Diff compares two webpack configuration files and shows you exactly which loaders, plugins, and optimization settings differ. Whether you are reviewing the differences between development and production builds, migrating from webpack 4 to webpack 5, or auditing build configurations across projects, this tool gives you a clear, color-coded view of every change.
Webpack configurations are among the most complex files in a JavaScript project. A production config might add code splitting, CSS extraction, terser minification, and content hashing — all absent from the development config. When these configs diverge silently or a migration introduces subtle changes, build issues can be difficult to trace back to configuration differences. A visual diff eliminates the guesswork.
Paste your webpack config files (the full module.exports object or the entire file). Since webpack configs are JavaScript, the tool performs line-by-line text comparison that works with require() statements, function calls, and dynamic expressions. Enable "Ignore whitespace" to focus on meaningful changes. Everything runs client-side — your build configuration never leaves your machine.
// Development config
module.exports = { mode: 'development', devtool: 'eval-source-map', output: { filename: 'bundle.js', }, devServer: { hot: true, port: 3000, },
}; // Production config
module.exports = { mode: 'production', devtool: 'source-map', output: { filename: '[name].[contenthash].js', }, optimization: { splitChunks: { chunks: 'all' }, },
};The diff highlights mode change, devtool strategy, content hashing addition, devServer removal, and new optimization block. Each environment-specific setting is immediately visible.
// Webpack 4
module.exports = { node: { fs: 'empty', path: 'empty', }, module: { rules: [{ test: /\.(png|jpg)$/, use: 'file-loader', }], },
}; // Webpack 5
module.exports = { resolve: { fallback: { fs: false, path: require.resolve('path-browserify'), }, }, module: { rules: [{ test: /\.(png|jpg)$/, type: 'asset/resource', }], },
};Webpack 5 replaced node polyfills with resolve.fallback, and built-in asset modules replaced file-loader. The diff makes these structural changes obvious.
// Development: inline styles for HMR
{ test: /\.css$/, use: ['style-loader', 'css-loader'],
} // Production: extract to separate files
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'],
} // The diff shows style-loader replaced by
// MiniCssExtractPlugin.loader — a single line change
// with significant build behavior impact.This single loader swap changes whether CSS is injected via JavaScript (development) or extracted to separate cacheable files (production). The diff catches it instantly.
Webpack configs contain JavaScript expressions like path.resolve(__dirname, 'dist') and new TerserPlugin(). These are compared as text strings, not evaluated. Two functionally identical expressions written differently (e.g., path.join vs path.resolve) will show as different even if they produce the same result.
Many projects use webpack-merge to combine a base config with environment-specific overrides. The merged result may differ from what you see in individual files. For the most accurate comparison, log the final resolved config with console.log(JSON.stringify(config, null, 2)) and compare those outputs.
Loader test patterns like /\.tsx?$/ are compared as literal text. A regex written as /\.(ts|tsx)$/ is functionally identical but will show as different. This is expected behavior — the diff tool compares syntax, not semantics.
Paste your webpack configuration files into the two panels and click Compare. The tool shows a side-by-side diff with line-by-line comparison and word-level highlighting for changed loaders, plugins, and settings.
Yes. Comparing development and production webpack configs is a primary use case. The diff highlights differences in mode, devtool, optimization settings, CSS extraction strategy, and environment-specific plugins.
Yes. Paste your webpack 4 config alongside the updated webpack 5 config to see removed options (like node polyfills), renamed properties, replaced loaders (like file-loader to asset modules), and new features at a glance.
Yes. Since webpack configs are JavaScript files, the tool performs line-by-line text comparison that works with any syntax including require() calls, path.resolve(), plugin instantiation, and dynamic expressions.
Yes. This tool runs entirely in your browser using client-side JavaScript. Your webpack configurations, including any file paths or environment references, are never sent to any server.
If your project uses webpack-merge to combine base and environment configs, paste the individual file you want to compare. For a complete comparison, you can also paste the merged output by logging it from your build script.