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

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

一. webpack解析css的loader

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

常用的loader:

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

解析scss文件

 module: { //这里写loaderrules: [// 多个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独立成一个文件,具体使用方法:

只需要两个步骤:

安装mini-css-extract-plugin

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

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: [//压缩jsnew TerserJSPlugin({}), //压缩cssnew 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为hashpath: path.resolve(__dirname, 'dist'),},module: { //这里写loaderrules: [// 多个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的效果

安装依赖

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

书写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'));
});

运行gulp命令

gulp

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

webpack项目运用(一)打包压缩css文件相关推荐

Webpack 如何抽离、压缩 CSS 文件？
关于抽离.压缩 css 文件,主要目的是为了减小体积,提升性能. 如果为本地使用,仅需配置 style-loader 和 css-loader 即可.css-loader 解析 .css 文件为 cs ...
webpack抽离和压缩css文件
1.为什么要抽离和压缩css文件在生产环境,css代码必须抽离和压缩,不然打包会把css文件打包到js文件中,体积会比较大.(执行这个js再把css解析出来,塞到html中,这样性能并不好) 2.抽 ...
webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
gulp压缩css文件夹,使用 gulp 压缩 CSS
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 ## [](https://github.com/nimojs/gulp-book/blob/ma ...
PHP自动压缩CSS文件方法,php 压缩多个CSS文件的实现代码
/* * 压缩css文件 * by www.jbxue.com /* header('Content-type: text/css'); ob_start("compress"); ...
dw html压缩文件,如何压缩css文件？
为什么要CSS压缩?如何压缩css文件?下面本篇文章给大家介绍一下CSS代码压缩原因和压缩css文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS代码压缩原因 CSS ...
web项目html引入css文件路径,详解Webpack和Webpack-simple中如何引入CSS文件_旧店_前端开发者...
博主最近研究首先说一下如何在webpack中引入之后在App.vue文件中在style标签项目写入你想要引入的样式: 本例引入的样式是一个名为nam.css的文件,该文件只是让页面变蓝,之后运行即 ...
webpack插件filemanager-webpack-plugin(管理打包后的文件路径)
前言项目中使用这个webpack插件(filemanager-webpack-plugin)是基于这样一个业务场景: 传统CMS项目,路由不在前端,后端需要前端提供文件前端需要将打包好的html. ...
php 使用压缩css文件,PHP-使用GZIP压缩静态CSS文件
所以我有一个CSS文件style.css.在同一目录中,我有images /文件夹. 如何制作一个从另一个文件夹压缩style.css的脚本? 现在我有这个: if(isset($_GET['css' ...
Python中fastapi构建的web项目使用pyinstaller打包为exe文件
假设当前已经使用fastapi构建了一个web项目,项目结构为: 如果我们想使用pyinstaller对此web项目进行打包为exe文件,则需要在项目的跟目录下面执行下述命令先安装pyinstalle ...

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

webpack项目运用(一)打包压缩css文件相关推荐

最新文章

热门文章