JavaScript实现对css文件压缩与合并的操作指南

npm install --save-dev css-loader style-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
};

npm install --save-dev gulp gulp-concat gulp-clean-css

const gulp = require('gulp');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');

gulp.task('styles', () => {
  return gulp.src('src/css/*.css') // 源文件路径
    .pipe(concat('styles.min.css')) // 合并文件
    .pipe(cleanCSS()) // 压缩 CSS
    .pipe(gulp.dest('dist/css')); // 输出路径
});

body { margin: 0; padding: 0; }
h1 { color: red; }

body{margin:0;padding:0;}h1{color:red;}