Как отразить запутанные имена классов из css файлов в DOM? - PullRequest
Новая
       35

Как отразить запутанные имена классов из css файлов в DOM?

1 голос
/ 27 февраля 2020

Я использую webpack и пытаюсь запутать css имен классов в производстве. Я успешно запутал css имя класса, установив modules: true, но проблема в том, что когда я его создаю, обфусцированные имена классов не отражаются в коде html, они остаются такими же, как в режиме разработки.

Как мне отразить запутанные имена классов в DOM? ??

Вот мои файлы конфигурации веб-пакета

веб-пакет. общий. js

const path = require('path');

module.exports = {
  entry: {
    main: "./src/index.js",
    treemap: "./src/treemap/index.js"
  },
  devtool: "none",
  module: {
    rules: [
      {
        test: /\.html$/i,
        use: ["html-loader"]
      }
    ]
  }
};

webpack.common. js

const path = require('path');
const merge = require("webpack-merge");
const common = require("./webpack.common");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "[name].[contentHash].bundle.js",
    path: path.resolve(__dirname, "build")
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contentHash].css"
    })
  ],
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin(),
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html',
        chunks: ['main'],
        hash: true,
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      }),
      new HtmlWebpackPlugin({
        filename: 'treemap.html',
        template: './src/treemap/index.html',
        chunks: ['treemap'],
        hash: true,
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                mode: "local",
                localIdentName: '[hash:base64:5]'
              }
            }
          }
        ]
      }
    ]
  }
});

Спасибо !!

...