30

webpack を使用しているときにエントリ ポイント内に css をロードすると、FOUC が発生します。css が webpack によって読み込まれないように削除し、それを通常のリンクとして html ファイルに含めるだけで、FOUC の問題は解消されます。

注: これはブートストラップ フレームワークだけでなく、Foundation と Materialize でも同じ結果でテストしました。

以下に投稿されたコードは、Bootstrap を使用した私の問題の単なるテスト例です。

HTML コード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Navbar example</h1>
    </div>
</div> <!-- /container -->

<script src="build/bundle.js"></script>
</body>
</html>

bootstrap.js のメイン エントリ ポイント

import "../node_modules/bootstrap/dist/css/bootstrap.css";
import bootstrap from 'bootstrap'

$(document).ready(function () {
   console.log('bootstrap loaded')
});

webpack.config.js

var path = require('path');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const webpack = require("webpack");

module.exports = {
  entry: './src/bootstrap.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
    resolve: {
        extensions: ['', '.js']
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': 'jquery'
        })
    ],
  devtool: 'inline-source-map',
  module: {
      resolve: {
          modulesDirectories: ['node_modules']
      },
    loaders: [
      {
        test: path.join(__dirname, 'src'),
        loader: 'babel-loader',
          query: {
              presets: ['es2015']
          }
      },
        { test: /\.css?$/, loader: 'style!css'},
        { test: /\.html$/, loader: 'html' },
        { test: /\.(png|gif|jpg)$/, loader: 'url', query: { limit: 8192 } },
        { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url', query: { limit: 10000, mimetype: 'application/font-woff2' } },
        { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url', query: { limit: 10000, mimetype: 'application/font-woff' } },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' },
    ]
  }
};
4

3 に答える 3

27

ExtractTextWebpackPluginを使用すると、CSS を JS バンドルに埋め込むのではなく、別のファイルとして出力できます。その後、このファイルを HTML に含めることができます。これにより、あなたが言ったように、スタイルのないコンテンツのフラッシュが防止されます。

ホットロードが機能しなくなり、コンパイルに時間がかかるため、これは本番環境でのみ使用することをお勧めします。次の場合にのみプラグインを適用するようにwebpack.config.js設定していますprocess.env.NODE_ENV === "production"。開発ビルドを行っている/開発サーバーを実行している場合でもFOUCを取得できますが、これは公正なトレードオフだと思います。

これを設定する方法の詳細については、SurviveJS のガイドをご覧ください。

更新:コメントに記載されているように、ExtractTextWebpackPlugin はmini-css-extract-pluginに取って代わられました- 代わりにそれを使用する必要があります。

于 2016-04-06T15:40:28.633 に答える