文章/答案/技术大牛

发布

社区首页 >问答首页 >webpack如何压缩HTML代码中的链接CSS文件？

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

Stack Overflow用户

提问于 2019-08-20 15:31:12

回答 1查看 178关注 0票数 1

我是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
            }
          }
        }
      }
}

我想压缩HTML上的链接CSS代码，但是我试图操纵它，我不能将链接css文件打包到html上，但是我可以在js文件中打包css。

我该怎么办？

期望值

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

你能帮帮我吗?

谢谢

css

webpack

javascript

html

回答 1

Stack Overflow用户

发布于 2019-08-21 04:40:21

您需要将css导入js文件，这样MiniCssExtractPlugin才能工作。

就像这样

app.js

import "css/Admin/admin.css";

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57577025

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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