5个有用的Webpack插件

哈Ha！

该webpack有许多有用的插件，许多插件都不知道并且在其项目中不使用。 在削减下，我收集了其中的5个，它们可以大大简化您的生活！

1.未使用的文件webpack插件

在大型前端项目中，总是有很多模块很容易丢失。 如果您不检查项目中是否有未使用的模块，则迟早它会累积任何地方未使用的垃圾文件。

要了解项目中未使用的文件，请将unused-files-webpack-plugin添加到您的配置中：

npm i unused-files-webpack-plugin 

 /* webpack.config.js */ const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin'); module.exports = { /* ... */ plugins: [ /* ... */ new UnusedFilesWebpackPlugin(), ], }; 

安装后，您将收到有关任何未使用文件的警告：

 src/ ├── index.js └── someFile.js ( ) 

 WARNING in UnusedFilesWebpackPlugin found some unused files: src/someFile.js 

参考文献：

→ Github
→ NPM

2.区分大小写的路径webpack插件

在OSX上进行开发期间，导入模块时，通常可能会混淆路径中的小写字母和大写字母。 该程序集将在罂粟上进行组装，但在其他区分大小写的系统上，它将掉落。

如果要解决此问题，则需要放入区分大小写的路径-webpack-plugin：

 npm i case-sensitive-paths-webpack-plugin 

 /* webpack.config.js */ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); module.exports = { /* ... */ plugins: [ /* ... */ new CaseSensitivePathsPlugin(), ], }; 

现在，如果使用错误的大小写导入模块，则始终会出现错误：

 /* index.js */ import someFile from './SOMEFILE'; 

 /* someFile.js */ export default () => { console.log('Hello!'); }; 

 ERROR in index.js Module not found: Error: [CaseSensitivePathsPlugin] `SOMEFILE.js` does not match the corresponding path on disk `someFile.js`. 

也可以使用import / no-unresolved eslint插件解决此问题。

在打字稿中，有一个类似的工作选项-forceConsistentCasingInFileNames。 但是她的行为略有不同：她检查从不同位置导入模块的情况是否相同，以防检查寄存器的正确性。

参考文献：

→ Github
→ NPM

3.检查包

在您的项目中，可能会出现以下情况：您和您的程序包使用同一库的不同版本。 然后，软件包的几个捆绑包将出现在捆绑包中，可以通过指定相同的版本来轻松修复。

Inspectpack将帮助您立即找到这种情况：

 npm i inspectpack 

 /* webpack.config.js */ const { DuplicatesPlugin } = require('inspectpack/plugin'); module.exports = { /* ... */ plugins: [ /* ... */ new DuplicatesPlugin(), ], }; 

如果安装了插件，则在出现软件包副本时将弹出警告：

 /* package.json */ { /* ... */ "name": "my-app", "dependencies": { "lodash": "4.1.0", "one": "1.2.3" } } 

 /* node_modules/one/package.json */ { /* ... */ "name": "one", "dependencies": { "lodash": "3.0.0" } } 

 /* index.js */ import _ from 'lodash'; import 'one'; /* ... */ 

 WARNING in Duplicate Sources / Packages - Duplicates found! ️ * Duplicates: Found 2 similar files across 2 code sources (both identical + similar) accounting for 703 bundled bytes. * Packages: Found 1 packages with 2 resolved, 2 installed, and 2 depended versions. ## bundle.js lodash (Found 2 resolved, 2 installed, 2 depended. Latest 4.1.0.) 3.0.0 ~/one/~/lodash scenario-new-webpack-new-npm-unflattened@* -> one@1.2.3 -> lodash@3.0.0 4.1.0 ~/lodash scenario-new-webpack-new-npm-unflattened@* -> lodash@4.1.0 

复制包检查器Webpack插件提供了类似的功能。 但是它有一个问题-它没有显示该库一个版本的多次出现，即 在剧透下的示例中存在问题，那里有tslib的多个相同版本，他找不到。

参考文献：

→ Github
→ NPM

4.循环依赖插件

在开发过程中，有时存在解决依赖关系的问题-两个模块相互导入并获得循环依赖关系。 这可以通过一系列其他模块隐式地发生。 在极少数情况下，循环依赖关系是正常的，但是很可能这表明项目体系结构中存在问题。

要立即查看循环依赖关系并将其删除，请添加循环依赖插件：

 npm i circular-dependency-plugin 

 /* webpack.config.js */ const CircularDependencyPlugin = require('circular-dependency-plugin'); module.exports = { /* ... */ plugins: [ /* ... */ new CircularDependencyPlugin(), ], }; 

现在，当出现循环依赖项时，您将收到警告：

 /* first.js */ import second from './second' /* ... */ 

 /* second.js */ import first from './first' /* ... */ 

 WARNING in Circular dependency detected: first.js -> second.js -> first.js WARNING in Circular dependency detected: second.js -> first.js -> second.js 

eslint的导入/不循环规则和tslint的tslint-no-circular-imports解决了类似的问题。 但是，后者不能忽略仅用于键入的类型，接口和类的导入-您通常必须编写tslint：disable。

参考文献：

→ Github
→ NPM

5.速度测量webpack插件

在包含数百个文件的大型项目中，组装可能需要花费几分钟。

Speed-measure-webpack-plugin将帮助测量每个构建步骤并发现问题：

 npm i speed-measure-webpack-plugin 

 /* webpack.config.js */ const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap({ /* ... */ }); 

构建输出将添加有关总构建时间，每个插件和每个加载程序链的执行时间的信息：

  SMP General output time took 48.97 secs SMP - Plugins TerserPlugin took 19.6 secs OptimizeCssAssetsWebpackPlugin took 2.65 secs MiniCssExtractPlugin took 0.261 secs VueLoaderPlugin took 0.216 secs /* ... */ SMP - Loaders mini-css-extract-plugin, and css-loader, and postcss-loader took 21.81 secs module count = 33 cache-loader, and babel-loader, and ts-loader, and tslint-loader took 21.63 secs module count = 240 /* ... */ 

他帮助我找到了TerserPlugin缩小速度的问题：我删除了几项设置，这些设置几乎对最终文件的大小没有影响，并加快了几秒钟。

参考文献：

→ Github
→ NPM