webpack如何壓縮HTML代碼中的鏈接CSS文件？

Question

我是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代碼，但是我嘗試對其進行操作，我無法在html上打包鏈接css文件，但可以在js文件中打包css。

我該怎么辦？

期望：

將鏈接的CSS文件打包為HTML並引用

你能幫助我嗎？

謝謝

Answer 1

您需要將css導入到js文件中，以便MiniCssExtractPlugin可以工作

像這樣

app.js

import "css/Admin/admin.css";

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

webpack如何壓縮HTML代碼中的鏈接CSS文件？

問題描述

1 個解決方案

解決方案1
0 2019-08-21 04:40:21

webpack如何壓縮HTML代碼中的鏈接CSS文件？

問題描述

1 個解決方案

解決方案1 0 2019-08-21 04:40:21

解決方案1
0 2019-08-21 04:40:21