webpack 工程实践化总结之常用 loader 和 plugin 总结

爱被打了一巴掌 2022-12-26 09:09 196阅读 0赞

#### 一、常用 loader ####

1.  `JavaScript` 相关，如下所示：

*  `babel-loader`：把 `ES6` 转换成 `ES5`；
 *  `script-loader`：可以将指定的模块 `JavaScript` 文件转成纯字符串通过 `eval` 方式执行；
 *  `exports-loader`：可以导出指定的对象，例如 `window.Zepto`；
 *  `ts-loader`：把 `TypeScript` 转换成 `JavaScript`；
 *  `imports-loader`：将任意三方的对象添加到 `window` 对象中。

1.  样式相关，如下所示：

*  `style-loader`：把 `CSS` 代码注入到 `JavaScript` 中，通过 `DOM` 操作去加载 `CSS`；
 *  `css-loader`：加载 `CSS`，支持模块化、压缩、文件导入等特性；
 *  `postcss-loader`：`CSS` 后处理器 `postcss` 的 `loader`；
 *  `less-loader`：把 `less` 代码转换成 `CSS` 代码；
 *  `sass-loader`：把 `SCSS/SASS` 代码转换成 `CSS` 代码；
 *  `fast-sass-loader`：并行处理 `SCSS/SASS` 文件，比 `Sass-loader` 快 `5~10` 倍的 `loader`；
 *  `stylus-loader`：把 `Stylus` 代码转换成 `CSS` 代码；
 *  `mini-css-extract-plugin` 的 `loader`：将 `CSS` 样式内容提取到 `CSS` 文件中。

1.  静态资源相关，如下所示：

*  `raw-loader`：把文本文件的内容加载到代码中去；
 *  `file-loader`：把文件输出到一个文件夹中，在代码中通过相对 `URL` 去引用输出的文件；
 *  `url-loader`：和 `file-loader` 类似，但是能在文件很小的情况下以 `base64`的方式把文件内容注入到代码中去；
 *  `html-loader`：`HTML` 语法的 `loader`，可以处理 `HTML` 中的图片、`CSS`等；
 *  `svg-url-loader`：把压缩后的 `SVG` 内容注入到代码中；
 *  `markdown-loader`：把 `Markdown` 文件转换成 `HTML`；
 *  `ejs-loader`：把 `EJS` 模版编译成函数返回；
 *  `pug-loader`：把 `Pug` 模版转换成 `JavaScript` 函数返回；
 *  `image-webpack-loader`：加载并且压缩图片文件；
 *  `csv-loader`：加载 `csv` 文件内容；
 *  `xml-loader`：加载 `xml` 文件内容。

1.  工程相关，如下所示：

*  `eslint-loader`：通过 `ESLint` 检查 `JavaScript` 代码；
 *  `tslint-loader`：通过 `TSLint` 检查 `TypeScript` 代码；
 *  `mocha-loader`：加载 `Mocha` 测试用例代码。

1.  其他，如下所示：

*  `vue-loader`：加载 `Vue.js` 单文件组件。

#### 二、常用 plugin ####

1.  `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`：用于忽略部分文件

1.  非内置的插件，如下所示：

*  `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`文件夹，方便打包上线；
 *  `terser-webpack-plugin`：`JavaScript`代码压缩插件，这个插件兼容 `ES6` 语法，推荐使用这个插件，而不是用 uglifyjs；
 *  `serviceworker-webpack-plugin`：生成 `PWA service worker` 插件；
 *  `hard-source-webpack-plugin`：通过缓存提升非首次编译速度；
 *  `friendly-errors-webpack-plugin`：减少 `Webpack` 无用的构建 `log`；
 *  `stylelint-webpack-plugin`：`StyleLint` 的插件。