[6a3a178] | 1 | ## Circular Dependency Plugin
|
---|
| 2 |
|
---|
| 3 | Detect modules with circular dependencies when bundling with webpack.
|
---|
| 4 |
|
---|
| 5 | Circular dependencies are often a necessity in complex software, the presence of a circular dependency doesn't always imply a bug, but in the case where you believe a bug exists, this module may help find it.
|
---|
| 6 |
|
---|
| 7 | ### Webpack Versions
|
---|
| 8 |
|
---|
| 9 | The latest major version of this plugin `5`, supports webpack `4.0.1` and greater as a peer dependency. Major version `4` of this plugin and below are intended to support webpack `3.x.x` and below as a peer dependency.
|
---|
| 10 |
|
---|
| 11 | ### Basic Usage
|
---|
| 12 |
|
---|
| 13 | ```js
|
---|
| 14 | // webpack.config.js
|
---|
| 15 | const CircularDependencyPlugin = require('circular-dependency-plugin')
|
---|
| 16 |
|
---|
| 17 | module.exports = {
|
---|
| 18 | entry: "./src/index",
|
---|
| 19 | plugins: [
|
---|
| 20 | new CircularDependencyPlugin({
|
---|
| 21 | // exclude detection of files based on a RegExp
|
---|
| 22 | exclude: /a\.js|node_modules/,
|
---|
| 23 | // include specific files based on a RegExp
|
---|
| 24 | include: /dir/,
|
---|
| 25 | // add errors to webpack instead of warnings
|
---|
| 26 | failOnError: true,
|
---|
| 27 | // allow import cycles that include an asyncronous import,
|
---|
| 28 | // e.g. via import(/* webpackMode: "weak" */ './file.js')
|
---|
| 29 | allowAsyncCycles: false,
|
---|
| 30 | // set the current working directory for displaying module paths
|
---|
| 31 | cwd: process.cwd(),
|
---|
| 32 | })
|
---|
| 33 | ]
|
---|
| 34 | }
|
---|
| 35 | ```
|
---|
| 36 |
|
---|
| 37 | ### Advanced Usage
|
---|
| 38 |
|
---|
| 39 | ```js
|
---|
| 40 | // webpack.config.js
|
---|
| 41 | const CircularDependencyPlugin = require('circular-dependency-plugin')
|
---|
| 42 |
|
---|
| 43 | module.exports = {
|
---|
| 44 | entry: "./src/index",
|
---|
| 45 | plugins: [
|
---|
| 46 | new CircularDependencyPlugin({
|
---|
| 47 | // `onStart` is called before the cycle detection starts
|
---|
| 48 | onStart({ compilation }) {
|
---|
| 49 | console.log('start detecting webpack modules cycles');
|
---|
| 50 | },
|
---|
| 51 | // `onDetected` is called for each module that is cyclical
|
---|
| 52 | onDetected({ module: webpackModuleRecord, paths, compilation }) {
|
---|
| 53 | // `paths` will be an Array of the relative module paths that make up the cycle
|
---|
| 54 | // `module` will be the module record generated by webpack that caused the cycle
|
---|
| 55 | compilation.errors.push(new Error(paths.join(' -> ')))
|
---|
| 56 | },
|
---|
| 57 | // `onEnd` is called before the cycle detection ends
|
---|
| 58 | onEnd({ compilation }) {
|
---|
| 59 | console.log('end detecting webpack modules cycles');
|
---|
| 60 | },
|
---|
| 61 | })
|
---|
| 62 | ]
|
---|
| 63 | }
|
---|
| 64 | ```
|
---|
| 65 |
|
---|
| 66 | If you have some number of cycles and want to fail if any new ones are
|
---|
| 67 | introduced, you can use the life cycle methods to count and fail when the
|
---|
| 68 | count is exceeded. (Note if you care about detecting a cycle being replaced by
|
---|
| 69 | another, this won't catch that.)
|
---|
| 70 |
|
---|
| 71 | ```js
|
---|
| 72 | // webpack.config.js
|
---|
| 73 | const CircularDependencyPlugin = require('circular-dependency-plugin')
|
---|
| 74 |
|
---|
| 75 | const MAX_CYCLES = 5;
|
---|
| 76 | let numCyclesDetected = 0;
|
---|
| 77 |
|
---|
| 78 | module.exports = {
|
---|
| 79 | entry: "./src/index",
|
---|
| 80 | plugins: [
|
---|
| 81 | new CircularDependencyPlugin({
|
---|
| 82 | onStart({ compilation }) {
|
---|
| 83 | numCyclesDetected = 0;
|
---|
| 84 | },
|
---|
| 85 | onDetected({ module: webpackModuleRecord, paths, compilation }) {
|
---|
| 86 | numCyclesDetected++;
|
---|
| 87 | compilation.warnings.push(new Error(paths.join(' -> ')))
|
---|
| 88 | },
|
---|
| 89 | onEnd({ compilation }) {
|
---|
| 90 | if (numCyclesDetected > MAX_CYCLES) {
|
---|
| 91 | compilation.errors.push(new Error(
|
---|
| 92 | `Detected ${numCyclesDetected} cycles which exceeds configured limit of ${MAX_CYCLES}`
|
---|
| 93 | ));
|
---|
| 94 | }
|
---|
| 95 | },
|
---|
| 96 | })
|
---|
| 97 | ]
|
---|
| 98 | }
|
---|
| 99 | ```
|
---|
| 100 |
|
---|
| 101 | ### Maintenance
|
---|
| 102 |
|
---|
| 103 | This module is maintained despite few changes being necessary, please open issues if you find any bugs relating to integration with webpack core.
|
---|