webpack项目运用(一)打包压缩css文件

在webpack里我们会遇到一些关于压缩打包css的场景歌,本文就教大家如何实现:

一. webpack解析css的loader

因为webpack没有loader的情况下只能打包js文件,所以我们需要特定的loader来打包我们的css文件.

常用的loader:

1. css-loader用于解析css文件
2. sass-loader用于解析scss文件
3. style-loader将css文件生成字符串插入到head标签中style标签里

解析scss文件

 module: { //这里写loader
    rules: [
    	 // 多个loader用数组的形式,顺序是从右往左执行,从下到上
         // css-loader解析@import语法
         // style-loader将css文件插入到head标签中的style中
         { test: /\.scss$/, use: [ //解析scss文件
             {
                 loader: 'style-loader',
                 options: {
                     insertAt: 'bottom' //将style标签插到顶部
                 }
             },
             "css-loader",
             "sass-loader"
         ] }
     ]
 },

解析css文件

module: {
    rules: [
         { test: /\.css$/, use: [ //解析css文件
             {
                 loader: 'style-loader'
             },
             "css-loader",
         ] }
     ]
 },

但是这两种解析的模式都是将样式放入style标签里嵌入到head标签中,有的时候我们希望直接用link标签引入,此时我们就需要一个插件来实现了.

二 css作为单独文件link引入html文件中

这个插件是mini-css-extract-plugin(传送门),利用这个插件我们就可以将css独立成一个文件,具体使用方法:

只需要两个步骤:

1. 安装mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

2. style-loader换成MiniCssExtractPlugin.loader

//引入mini-css-extract-plugin这个插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module: { 
	rules: [
		     {  test: /\.css$/, 
		      	use: [
		      		MiniCssExtractPlugin.loader, //将css的样式抽离出link进去
		            "css-loader",
		        ] 
		     }
	]
},
plugins: [ //数组,放所有webpack插件
     new MiniCssExtractPlugin({
     	 //生成css文件的路径及名称
         filename: "/css/main.css"
     })
 ],

但是我们发现这个生成的main.css并没有被压缩,我们需要另外两个插件:
optimize-css-assets-webpack-plugin与terser-webpack-plugin,(以前JS的压缩用的是uglify.js-webpack-plugin)

const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  optimization: {//webpack4提供的优化项
    minimizer: [
    	//压缩js
    	new TerserJSPlugin({}), 
		//压缩css
		new OptimizeCSSAssetsPlugin({})
	],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename:  "/css/main.css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

那么现在就可以做到将css单独抽离出来,并且css已经被压缩了.

ps:附上完整的demo

//command.js规范
const path = require('path'); //nodeJS的核心包
const HtmlWebpackPlugin = require('html-webpack-plugin') //把打包后的结果插入到模板中
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')

module.exports = {
    optimization: {
        minimizer: [
            new TerserJSPlugin({}),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    mode: 'production',
    entry: './main.js', //打包的入口,如果入口不对打包也会生效
    output: {
        //生成绝对路径
        filename: 'bundle.[hash:4].js', //只显示4为hash
        path: path.resolve(__dirname, 'dist'),
    },
    module: { //这里写loader
        rules: [
            // 多个loader用数组的形式,顺序是从右往左执行,从下到上
            { test: /\.css$/, use: [ //处理css文件
                MiniCssExtractPlugin.loader, //将css的样式抽离出link进去
                "css-loader",
            ] }
        ]
    },
    plugins: [ //数组,放所有webpack插件
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './client/index.html',
            minify: {
                removeAttributeQuotes: true, //删除属性的双引号
                collapseWhitespace: true, //将html折叠为一行
            },
            hash: true, //hash化
        }),
        new MiniCssExtractPlugin({
            filename: "/css/main.css"
        })

    ],
};

三 利用gulp实现压缩css的效果

1. 安装依赖

//全局安装
npm install -g gulp
//切换自己的工程目录下
npm install --save-dev gulp
npm install --save-dev gulp-minify-css

2. 书写gulpfile.js文件

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");
 
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

3. 运行gulp命令

gulp

这样就可以得到打包压缩后的js了