在javascript之前加载样式-webpack 4

Question

在javascript之前加载样式-webpack 4

我的JavaScript正在加载样式之前，这会导致跳跃和奇怪的加载。

这是我的演示：https : //harp29.github.io/cb-pc/

如何通过Webpack运行JavaScript文件之前，如何加载styles / css文件？我尝试了setTimeout功能，但是它起作用了，但这是一个临时解决方案，那是解决此问题的最佳方法？

我的webpack文件：webpack.dev.js

const path = require("path")
const webpack = require("webpack")
const HTMLWebpackPlugin = require("html-webpack-plugin")
// const cssDev = ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap'];

module.exports = {
  entry: {
    main: [
      "webpack-hot-middleware/client?reload=true",
      "./src/script/main.js"
    ]
  },
  mode: "development",
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist"),
    publicPath: "/"
  },
  devServer: {
    contentBase: "dist",
    overlay: true,
    stats: {
      colors: true
    }
  },
  devtool: "source-map",
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: "babel-loader"
        }]
      },
      {
        test: /\.css$/,
        use: [{
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
      },
      {
        test: /\.(jpeg|jpg|png|svg)$/,
        use: [{
          loader: "file-loader",
          options: {
            name: "images/[name].[ext]"
          }
        }]
      },
      {
        test: /\.html$/,
        use: [{
          loader: "html-loader"
        }]
      },
      {
        test: /\.pug$/,
        use: [{
          loader: "pug-loader"
        }]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HTMLWebpackPlugin({
      template: "./src/pug/index.pug",
      title: "Cervini Bhatia PC",
      inject: true
    })
  ]
}

Run Code Online (Sandbox Code Playgroud)

我的main.js文件：

const scss = require('../scss/style.scss');
import index from '../pug/index.pug';
import favicon from '../images/favicon.png';
import logoSymbol from '../images/logo-symbol.svg';
import IntroAnimations from './module/IntroAnimations';

//Instaniate
new IntroAnimations()
.animateTimelines();

Run Code Online (Sandbox Code Playgroud)

我的index.pug文件：

doctype html
html
  head.
    <meta charset="UTF-8">
    <title>Welcome - Cervini Bhatia PC</title>   
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
  body   
    include ./modules/_loading.pug
    include ./modules/_landing.pug
    include ./modules/_team-section.pug
    include ./modules/_experience.pug
    include ./modules/_firm.pug
    include ./modules/_communication.pug
    include ./layout/_footer.pug

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ata*_*v32 9

最简单的解决方法是在 pug 模板中包含一小段 CSS 以隐藏<body>. 然后<body>在动画开始之前包含一行 JS 以取消隐藏。

编辑：如果您想从 JS 包中单独加载 CSS 文件，请使用https://github.com/webpack-contrib/mini-css-extract-plugin。在您的模板中，<link>在生成的 CSS 文件的公共路径中包含一个标记。

发生这种情况是因为您捆绑了 style-loader，它将 CSS 作为字符串放入您的 Javascript 包中。

因此，当浏览器解析您的 JS 包（非常慢）时，HTML 将呈现（非常快）。在该包的末尾，浏览器将找到包含您的 CSS 字符串的模块。然后它会解析它并使用 Javascript 应用样式。

归档时间：	7 年，5 月前
查看次数：	734 次
最近记录：	6 年，7 月前