时间戳

首页 > 解决方案 > webpack 的（轻微）样式加载延迟

webpack - webpack 的（轻微）样式加载延迟

问题描述

刚刚将 webpack 集成到我的简单天气应用程序中，这太棒了……但有一个问题。当我在浏览器（chrome）中打开它时，样式会略有延迟，即在样式涌入之前，您可以在几秒钟内看到原始 html。这是我的webpack.config.js文件：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/scripts/app.js"
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new HtmlWebpackPlugin( { template: "./src/templates/index.html" } )
    ],
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader", "css-loader"] }
        ]
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'src'),
        },
        compress: true,
        port: 3000,
        open: true
    }
}

如您所见，我正在使用style-loaderandcss-loader加载器。有什么方法可以加快样式的加载速度？

如果您需要任何其他信息来建议解决方案，请在下方评论。

谢谢。

标签： webpack

解决方案

推荐阅读