Webpack Extract-Text-Plugin localIdentNameがDOM内で動作していない

Question

FlipKartを見て、彼らはclassNamesとCSSesのすべてをハッシュしました。 私は彼らがCSSを構築するためにSCSSを使用していることを知っています。

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() 
] 
}; 

しかし、それはちょうどDOMでCSSファイルとクラス名で私のクラス名をハッシュ：これは私のWebPACKある

：どのように私は彼らのように私の輸出を作るために私のWebPACKを設定できるの DOMのクラス名要素の1つがproduct__bag--red, のCSSファイルのクラス名が_1x4であるなど、開発版です。

DOMのproduct__bag--redの代わりに_1x4が表示されるようにwebpackまたはextract-text-pluginを設定するにはどうすればよいですか？

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ファイル：modulesが設定されている場合

import style from './file.css' 

document.body.innerHTML = ` 
    <div class=${style.app}></div> 
` 

我々はを取得する必要がありますCSSでののインポートは{Object}