Webpack Extract-Text-Plugin localIdentName 在 DOM 中不起作用

Posted 2023-03-08

【中文标题】Webpack Extract-Text-Plugin localIdentName 在 DOM 中不起作用

【英文标题】：Webpack Extract-Text-Plugin localIdentName not working in DOM

【发布时间】：2017-11-20 14:20:43

【问题描述】：

我看到了FlipKart，他们对所有的类名和它的 CSS 进行了哈希处理。 我知道他们使用 SCSS 来构建 CSS。 如何配置我的 WebPack 以使我的导出像他们的：

这是我的 webpack：

var webpack = require('webpack'),
path = require('path'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
UglifyJSPlugin = require('uglifyjs-webpack-plugin'),
OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

var DistDir = path.resolve(__dirname, 'app/dist'),
SrcDir = path.resolve(__dirname, 'app/src');

module.exports = 
entry: SrcDir,
output: 
    path: DistDir,
    filename: "bundle.min.js"
,
module: 
    rules: [
        
            test: /\.js$/,
            exclude: /node_modules/,
            include: SrcDir,
            loader: 'babel-loader'
        ,
        
            test: /\.(scss|css)$/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract(
                use: [
                    loader: "css-loader", options: 
                        modules: true,
                        localIdentName: '[hash:base64:3]',
                        sourceMap: false
                    
                , 
                    loader: "sass-loader", options: 
                        sourceMap: false
                    
                ],
                fallback: "style-loader"
            )
        ,
        
            test: /\.png$/,
            loader: "file-loader",
            exclude: /node_modules/
        
    ]
,
plugins: [
    new webpack.DefinePlugin(
        'process.env': 
            'NODE_ENV': JSON.stringify('production')
        
    ),
    new ExtractTextPlugin("bundle.min.css"),
    new OptimizeCssAssetsPlugin(
        cssProcessor: require('cssnano'),
        cssProcessorOptions:  discardComments: removeAll: true  ,
        canPrint: true
    ),
    new UglifyJSPlugin(
        compress: 
            unused: true,
            dead_code: true,
            warnings: false,
            drop_debugger: true,
            conditionals: true,
            evaluate: true,
            drop_console: true,
            sequences: true,
            booleans: true
        ,
        comments: false
    ),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
]
;

但它只是散列我在 CSS 文件中的类名，而 DOM 中的类名是开发版本，例如 DOM 中的类名元素之一是product__bag--red， 它在 CSS 文件中的类名是_1x4。

如何配置 webpack 或 extract-text-plugin 以在 DOM 中看到 _1x4 而不是 product__bag--red？

【参考方案1】：

单独的CSS 文件：

.app 
  display: flex;

单独的React组件文件：

import style from './file.css'

class Component extends React.Component 
   render () 
     return (
       <div className=style.app></div> 
    )
  

单独的普通javascript文件：

import style from './file.css'

document.body.innerhtml =  `
   <div class=$style.app></div>
`

当modules 被设置时，我们必须在CSS 导入中将classNames 作为Object 获得