大家好!我是萝卜,这篇文章主要是将我自己平时开发中常用的一些插件和大家做一个分享,大家在自己的工作或者项目中如果有类似的需要可以直接通过这篇文章进行查找以及使用。
webpack 内置插件:
- webpack.DefinePlugin:定义全局常量插件;
- webpack.EnvironmentPlugin:定义环境变量插件;
- webpack.BannerPlugin:在代码中添加版权注释等;
- webpack.DllPlugin:使用 DLL 思想来加快编译速度的插件;
- webpack.HashedModuleIdsPlugin:可以修改文件 Hash 算法的插件;
- webpack.optimize.SplitChunksPlugin:代码拆分优化插件;
- webpack.HotModuleReplacementPlugin:开启模块热替换功能,通过监听文件变化并自动加载被修改的文件来减少烦人的浏览器手动重新加载;
- webpack.ProgressPlugin:构建进度插件;
- webpack.ProvidePlugin:自动加载模块,例如出现 $ 则加载 jQuery 等常用库;
- webpack.IgnorePlugin:用于忽略部分文件;
非内置插件:
- mini-css-extract-plugin:CSS 文件提取,并且在生产环境构建是可以用于优化 CSS 文件大小;
- optimize-css-assets-webpack-plugin:压缩 CSS 文件;
- clean-webpack-plugin:在编译之前清理指定目录指定内容;
- html-webpack-plugin:html 插件,可以根据 JavaScript 模板文件生成 HTML;
- preload-webpack-plugin:html-webpack-plugin 的插件,给页面添加<link rel="preload">资源;
- i18n-webpack-plugin:帮助网页做国际化的插件;
- webpack-manifest-plugin:生成 Webpack 打包文件清单的插件;
- html-webpack-inline-source-plugin:在 HTML 中内联打包出来的资源;
- webpack-bundle-analyzer:webpack bundle 分析插件;
- copy-webpack-plugin:文件拷贝插件,可以指定文件夹的文件复制到 output 文件夹,方便打包上线;
- serviceworker-webpack-plugin:生成 PWA service worker 插件;
- hard-source-webpack-plugin:通过缓存提升非首次编译速度;
- friendly-errors-webpack-plugin:减少 Webpack 无用的构建 log;
- stylelint-webpack-plugin:StyleLint 的插件。