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

Question

我看到了 FlipKart ，他们对所有 class 名称及其 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 文件中的 class 名称和 DOM 中的 class 名称是开发版本，例如 class 之一DOM 中的名称元素是 product__bag--red，它在 CSS 文件中的 class 名称是 _1x4.

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

Answer 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}

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

Webpack Extract-Text-Plugin localIdentName not working in DOM

javascript

node.js

webpack

webpack-2

extract-text-plugin