i getting fouc when loading css inside of entry point when using webpack. if remove css being loaded webpack , include in html file normal link problem fouc goes away.
note: not bootstrap framework, have tested foundation , materialize same results
the code posted below test example of problem using bootstrap.
html code
<!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 main entry point
import "../node_modules/bootstrap/dist/css/bootstrap.css"; import bootstrap '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' }, ] } };
extracttextwebpackplugin allow output css separate file rather having embedded in js bundle. can include file in html, said, prevents flash of unstyled content.
i'd recommend using in production environments, stops hot-loading working , makes compile take longer. have webpack.config.js set apply plugin when process.env.node_env === "production"; still fouc when you're doing development build/running dev server, feel fair trade off.
for more information on how set up, take @ survivejs's guide.
Comments
Post a Comment