小编Mar*_*zzi的帖子

Webpack5 + MiniCssExtractPlugin + html-webpack-plugin 不在index.html 上添加链接标签

我尝试使用 Webpack5 + MiniCssExtractPlugin + html-webpack-plugin 和其他插件构建生产环境,但我无法将 css 标签包含在 index.html 中。

每次 css 文件由 javascript 附加时,都会出现“无样式内容的闪存”(FOUC) 问题。

我使用npm run build和这个简单的命令:webpack --config webpack.prod.js

webpack.prod.js

const path = require('path');
const common = require('./webpack.config');
const { merge } = require('webpack-merge');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(common,{
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: '',
        filename: '[name].[hash].js',
    },
    plugins: [
        new CleanWebpackPlugin({}),
        new MiniCssExtractPlugin({
            filename:'[name].[hash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: …
Run Code Online (Sandbox Code Playgroud)

hyperlink fouc webpack

8
推荐指数
0
解决办法
1082
查看次数

标签 统计

fouc ×1

hyperlink ×1

webpack ×1