防止在反应中显示原始 HTML答案

【问题标题】：Prevent display of raw HTML in react防止在反应中显示原始 HTML
【发布时间】：2017-01-26 23:19:37
【问题描述】：

有没有办法在 React.js 中防止在 CSS 样式表完全加载之前显示原始 HTML。我正在使用 Webpack、Semantic-UI（react 版本）和 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 的情况下尝试了完全相同的配置，并且从组件导入。

【问题讨论】：

你的意思是在你的 React 应用程序的根元素之外定义的 HTML？
在我的主要 React 应用程序中没有。但由于我使用的 webpack 似乎在 HTML 之后加载 css 文件，因此渲染首先是原始的，然后用 CSS 格式化。
这不是默认行为，您可以发布一些代码、webpack 配置 + 在您的应用中加载样式表的位置吗？
当然。其实我并没有直接在我的代码中导入，我以为webpack会自动导入css。

标签： javascript reactjs webpack render

【解决方案1】：

这不是生产部署的正确设置。

默认情况下，Webpack 将您的 CSS 转换为 Javascript 代码，在页面中注入 CSS 标签。这允许热 CSS 重新加载。显然，它只适用于开发环境。你应该在开发中使用这个默认行为，不应该在生产中使用它。

在生产中，您需要构建一个单独的 CSS 文件并在生产 HTML 代码中使用 <style> 标记正常加载它。要告诉 Webpack 将其提取到文件中，请使用 ExtractTextPlugin，您的代码需要但从不使用它。

您应该维护两个 Webpack 配置文件，一个用于不提取文本（并且不会缩小/丑化等）的开发文件，另一个用于生产，它可以正确缩小、散列名称、提取文本等。

【讨论】：

能否详细解释一下配置文件需要做哪些修改？