反応中の未処理HTMLの表示を防止する

Question

CSSスタイルシートが完全にロードされる前に、React.js、生のHTML表示を防止する方法はありますか？私はWebpack、セマンティックUI（反応バージョン）とReact.jsを使用しています。

Reactにng-cloak（angular）の相当物がありますか？

ここに私のWebPACKの設定ファイルの内容です：

const webpack = require('webpack') 
const ManifestPlugin = require('webpack-manifest-plugin') 

const path = require("path"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

const DEBUG = process.env.NODE_ENV !== 'production' 

const plugins = [ 
    new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"` 
    }) 
] 
const assetsDir = process.env.ASSETS_DIR 
const assetMapFile = process.env.ASSETS_MAP_FILE 
const outputFile = DEBUG ? '[name].js' : '[name].[chunkhash].js' 

if (!DEBUG) { 
    plugins.push(new ManifestPlugin({ 
    fileName: assetMapFile 
    })) 
    plugins.push(new webpack.optimize.UglifyJsPlugin({ minimize: true })) 
} 

const config = { 
    entry: { 
    bundle: ['babel-polyfill', './src/client/index.jsx'] 
    }, 
    module: { 
    noParse: [], 
    loaders: [ 
     { test: /\.json$/, loader: 'json' }, 
     { test: /\.css$/, loader: 'style!css' }, 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /(node_modules|bower_components)/, 
     query: { 
      cacheDirectory: DEBUG 
     } 
     }, 
     {test:/.svg$/,loader:'url-loader',query:{mimetype:'image/svg+xml', 
     name:'/semantic/themes/default/assets/fonts/icons.svg'}}, 
     {test:/.woff$/,loader:'url-loader',query:{mimetype:'application/font-woff', 
     name:'/semantic/themes/default/assets/fonts/icons.woff'}}, 
     {test:/.woff2$/,loader:'url-loader',query:{mimetype:'application/font-woff2', 
     name:'/semantic/themes/default/assets/fonts/icons.woff2'}}, 
     {test:/.[ot]tf$/,loader:'url-loader',query:{mimetype:'application/octet-stream', 
     name:'/semantic/themes/default/assets/fonts/icons.ttf'}}, 
     {test:/.eot$/,loader:'url-loader',query:{mimetype:'application/vnd.ms-fontobject', 
     name:'/semantic/themes/default/assets/fonts/icons.eot'}}, 
     { test: /\.png/, loader: "url-loader?limit=100000&minetype=image/png" }, 
     { test: /\.jpg/, loader: "file-loader" } 
    ] 
    }, 
    node: { 
    fs: "empty" 
    }, 
    resolve: { 
    alias: { 
     "semantic-ui" : path.resolve(__dirname, "../semantic/dist/semantic.min.css") 
    }, 
    extensions: ['', '.js', '.jsx', ".css"] 
    }, 
    plugins, 
    output: { 
    filename: outputFile, 
    path: DEBUG ? '/' : assetsDir, 
    publicPath: '/assets/' 
    } 
} 

if (DEBUG) { 
    config.devtool = '#inline-source-map' 
} else if (process.env.NODE_ENV === 'production') { 
    config.devtool = 'source-map' 
} 

module.exports = config 

私は私のコンポーネントからの私のCSSをロードしようとすると、私はこのエラーを得た：

Cannot find module '/semantic/dist/semantic.min.css' 

とモジュールが存在します。 Webpackなしで全く同じ設定を試し、コンポーネントからインポートしました。

Answer 1

これは、運用環境での展開のための正しいセットアップではありません。

デフォルトでは、WebpackはCSSをページに挿入するJavascriptコードに変換します。これにより、ホットCSSリロードが可能になります。明らかに開発環境にのみ適しています。 はで、このデフォルト動作はdevで、はを本番環境で使用しないでください。

プロダクションでは、別のCSSファイルを作成し、通常はプロダクションHTMLコードに<style>タグを付けてロードする必要があります。 Webpackにファイルに取り込むように指示するには、コードには必要ですが使用することはないExtractTextPluginを使用します。

Webpackの設定ファイルは、テキストを抽出しない（および縮小/ uglifyなどはしない）ものと、実際に縮小し、名前をハッシュしたり、テキストを抽出したりするためのものです。