Webpack Extract-Text-Plugin localIdentName不能在DOM中工作

我看到了FlipKart，他們將所有className和CSS都散列。我知道他們使用SCSS來構建CSS。我如何配置我的WebPack使我出口像他們：Webpack Extract-Text-Plugin localIdentName不能在DOM中工作

這是我的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() 
] 
};

，但它只是湊在DOM CSS文件和類名我的類名在dev版本中，例如DOM中類名稱元素之一是product__bag--red, 其CSS類文件中的類名是_1x4。

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

來源

2017-06-18 AmerllicA

您是否將'className'添加爲'JavaScript'對象？ – 2017-06-20 05:59:34

我希望'WebPack'只需將'modules'設置爲'true'值，就可以用自己的能力或'extract-text-plugin'功能管理我所有的'className'。但昨天明白，我所有的'className's必須作爲一個'CSS's被導入的對象。 – AmerllicA

獨立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設置必須得到classNames上的CSS導入作爲{Object}

來源

2017-06-20 03:45:17 AmerllicA

Webpack Extract-Text-Plugin localIdentName不能在DOM中工作

回答

相關問題