webpack html-loader 和 MiniCssExtractPlugin

问题描述

我正在使用 webpack 入门页面的设置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'development',entry: './src/index.js',devtool: 'inline-source-map',devServer: {
    contentBase: './dist',},plugins: [
    new HtmlWebpackPlugin({
      title: 'Development',template: 'src/index.html'
    }),new MiniCssExtractPlugin(),],output: {
    filename: '[name].bundle.js',path: path.resolve(__dirname,'dist'),clean: true //clean dist folder before each build
  },module: {
    rules: [
      {
        test: /\.html$/i,loader: 'html-loader',{
        test: /\.css$/i,use: [MiniCssExtractPlugin.loader,'css-loader'],{
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,type: 'asset/resource',{
        test: /\.(woff|woff2|eot|ttf|otf)$/i,};

如果我在 import './style.css'; 的顶部包含 src/index.js，那么这个就可以了。在生成的 dest/index.html 中，我得到提取的 CSS 样式生成为 <link href="main.css" rel="stylesheet"> 的行。

现在我想要的是删除 import './style.css'; 顶部的那一行 src/index.js 并使用我将放置在模板 <link rel="stylesheet" type="text/css" href="style.css"> 中的那一行 src/index.html。

执行此操作时，生成的 dest/index.html 正确获取了行 <link rel="stylesheet" type="text/css" href="b88d04fba731603756b1.css"> 并生成了文件 dest/b88d04fba731603756b1.css，但它的内容是错误的，因为我得到的是这个而不是真正的 css 样式：>

// extracted by mini-css-extract-plugin
export {};

有没有办法将html-loader插件与MiniCssExtractPlugin一起使用，这样我就不需要在js文件中导入css而是在html模板中导入它？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）