0

在添加插件之前，一切正常，没有任何错误（优化器、最小化器等）。然后，我安装了 html-critical-webpack-plugin 以便在 html 中内联关键 css 并延迟非关键 css，终端中也没有错误。但是，输出是一个完全独立的 html 文件，仅包含关键/非关键 css，没有任何 index.js 导入。

有谁知道如何将此插件与其余设置结合使用？

webpack.prod.js

const path = require("path");
const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlCriticalWebpackPlugin = require("html-critical-webpack-plugin");


module.exports = merge(common,{
  mode: "production",
  output: {
    filename: "main.[contentHash].js",
    path: path.resolve(__dirname, "prod"),
    
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin(),
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/template.html',
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      }),
      new HtmlWebpackPlugin({
        filename: 'contactform.html',
        template: './src/contactform.html',
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({filename: "[name].[contentHash].css"}),
    new HtmlCriticalWebpackPlugin({
      base: path.resolve(__dirname, 'src'),
      src: 'template.html',
      dest: '../prod/index.html',
      inline: true,
      minify: true,
      extract: true,
      penthouse: {
        blockJSRequests: false,
      }
    }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"], //order matter. also the one with the highest index loads first. in this case css-loader
      },
    ]
  }
});

index.js

import './css/normalize.css';
import './css/main.css';
import './css/navigation.css';
import './css/about.css';
import './css/work.css';
import './css/testimonials.css';
import './css/work.css';
import './css/contact.css';
import './css/small-devices.css';
import './css/global-animation.css';
import './js/main.js';
import './js/jquery.js';
4

0 回答 0