webpack如何压缩HTML代码中的链接CSS文件？答案

【问题标题】：How does webpack compress link CSS files in HTML code?webpack如何压缩HTML代码中的链接CSS文件？
【发布时间】：2019-12-25 20:53:55
【问题描述】：

我是webpack的新手，在HTML中，我想压缩和引用链接CSS文件

我有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <link rel="stylesheet" href="../src/common.css">    
</head>

<body>
  <div class="common-red">
  hello;
  </div>
 <script src="main.js"></script>
</body>
</html>

js文件：

import "common.css"

这是我的个人资料：

webpack.config.js:


const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: "./src/index.js",
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    "style-loader",
                    'css-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.(html)$/,
                use:{
                    loader: "html-loader",
                    options:{
                        attrs:['img:src']
                    }
                }
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    optimization: {
        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              test: /\.css$/,
              chunks: 'all',
              enforce: true
            }
          }
        }
      }
}

我想把链接css代码压缩在html上，但是我试图操纵它，我无法将链接css文件打包到html上，但是我可以将css打包到js文件中。

我该怎么办？

期望：

将链接的css文件打包成HTML并引用

你能帮帮我吗？

谢谢

【问题讨论】：

你看过 MiniCssExtractPlugin 了吗？ webpack.js.org/plugins/mini-css-extract-plugin
@BugsArePeopleToo 我试过了。它没有工作
您是否将 CSS 导入您的应用程序？ webpack 需要 import 才能查看文件。
你试过在 CSS 规则中移除 style-loader 吗？只是猜测
@BugsArePeopleToo 这个插件只支持JS中的CSS压缩，不支持HTML链接CSS文件。

标签： javascript html css webpack

【解决方案1】：

你需要将你的 css 导入到你的 js 文件中，这样 MiniCssExtractPlugin 才能工作

类似的东西

app.js

import "css/Admin/admin.css";

import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.min.js";

【讨论】：

感谢您的回答。我试过这个方法。它不工作。
没有错误，我很惊讶。
很抱歉错过了一个案例。如果链接 CSS 文件没有被删除，Module not found: Error: Can't resolve 'common. CSS '会报错