@achipiga1/mangle-css-class-webpack-plugin 中文文档教程

Question

mangle-css-class-webpack-plugin

缩小和混淆 JavaScript、CSS 和 HTML 中的类名。 仅适用于 WEBPACK 5！

Install

  npm i --save-dev mangle-css-class-webpack-plugin

  yarn add --dev mangle-css-class-webpack-plugin

Usage

该插件将在 HTML、JavaScript 和 CSS 文件中生成优化的类名。 配置如下：

webpack.config.js

const MangleCssClassPlugin = require('mangle-css-class-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new MangleCssClassPlugin({
      classNameRegExp: '[cl]-[a-z][a-zA-Z0-9_]*',
      log: true,
    }),
  ],
};

这将替换 HTML、JavaScript、CSS 文件中匹配正则表达式的类名。 识别类名称以不匹配意外的单词，因为它会替换所有与 classNameRegExp 匹配的单词。 我建议您的类名具有标识为类名的特定前缀或后缀。

Options

classNameRegExp

例如 '(abc-|efg-)?[cl]-[az][a-zA-Z0-9_]*'
示例正则表达式匹配 l-main、c-textbox、l-main__header、abc-textbox__input 等on ...

如果要在正则表达式中使用反斜杠 \，请使用 [\\\\]* 来匹配包含 JS(\\ \\) 和 CSS(\\\\\\\\\\\\\\\\)。

reserveClassName

不会使用类名。
例如

reserveClassName: ['fa', 'fas', 'far'],

ignorePrefix

，前缀将从重整中被忽略。
例如

classNameRegExp: '(abc-|efg-)?[cl]-[a-z][a-zA-Z0-9_]*',
ignorePrefix: ['abc-', 'efg-'],

，在这种情况下，abc-c-textbox__input 变为 abc-a。

ignorePrefixRegExp

与 ignorePrefix 相同的行为。
例如

classNameRegExp: '((hover|focus|xs|md|sm|lg|xl)[\\\\]*:)*tw-[a-z_-][a-zA-Z0-9_-]*',
ignorePrefixRegExp: '((hover|focus|xs|md|sm|lg|xl)[\\\\]*:)*',

，在这种情况下，hover\:xs\:c-textbox__input 变为 hover\:xs\:a。

classGenerator

覆盖默认的类名生成器。

// original: original class name
// opts: options of the plugin
// context: own context of the class generator(initial value is just an empty object)
classGenerator: (original, opts, context) => {
  // return custom generated class name.
  // Or return undefined if you want to leave it to the original behavior.
}

Example

Source code

<!-- html -->
<main class='l-abc'>
  <div class='l-efg' />
</main>

// js
document.querySelector('l-efg');

// css
.l-abc {
}
.l-abc .l-efg {
}

Output code

<!-- html -->
<main class='a'>
  <div class='b' />
</main>

// js
document.querySelector('b');

// css
.a {
}
.a .b {
}