16-webpack 压缩 CSS 代码

最新推荐文章于 2024-08-12 08:46:19 发布
最新推荐文章于 2024-08-12 08:46:19 发布
阅读量694 收藏
点赞数
分类专栏： webpack学习笔记 文章标签： webpack css压缩 mini-css-extract-plugin optimize-css-assets-webpack-plugin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZWQ0325/article/details/97011878
版权

从 06-webpack 加载 CSS 之后，能够正常加载 CSS ，并且能够正常显示。

要看到压缩 CSS 代码效果，需要先把 CSS 从 bundle.js 中抽离出来，并导入独立的文件中去，然后再添加压缩操作。

一、导出 CSS 到独立文件

需要通过 mini-css-extract-plugin 插件来完成。

1.1 安装

npm install --save-dev mini-css-extract-plugin
//
yarn add  mini-css-extract-plugin --dev

安装成功

yarn add v1.16.0
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
[4/4] ?  Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
└─ mini-css-extract-plugin@0.8.0
info All dependencies
├─ is-plain-obj@1.1.0
├─ mini-css-extract-plugin@0.8.0
├─ normalize-url@1.9.1
├─ prepend-http@1.0.4
├─ query-string@4.3.4
├─ sort-keys@1.1.2
└─ strict-uri-encode@1.1.0
✨  Done in 7.18s.

1.2 编辑 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin  = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/index.js',
    mode:"production",
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                     //添加loader,用于生产模式，不能有 style-loader 
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    "css-loader"
                ]
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: "15- webpack 压缩 JavaScript 代码",
            minify: {
                collapseWhitespace: true,//删除空格、换行
            },
        }),
        //添加插件
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
};

不能使用 style-loader 的原因

This plugin should be used only on production builds without style-loader in the loaders chain, especially if you want to have HMR in development.

1.3 编译代码

此时 dist 目录下会生成 main.css

.hello{
    color: red;
}

二、压缩 CSS

压缩 CSS 代码，通过 optimize-css-assets-webpack-plugin 插件完成。

2.1 安装

npm install --save-dev optimize-css-assets-webpack-plugin
//
yarn add optimize-css-assets-webpack-plugin --dev

安装成功

yarn add v1.16.0
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
[4/4] ?  Building fresh packages...
success Saved lockfile.
success Saved 82 new dependencies.
info Direct dependencies
└─ optimize-css-assets-webpack-plugin@5.0.3
info All dependencies
├─ @types/q@1.5.2
├─ argparse@1.0.10
├─ caller-callsite@2.0.0
├─ caller-path@2.0.0
├─ callsites@2.0.0
├─ caniuse-lite@1.0.30000985
├─ coa@2.0.2
├─ color-string@1.5.3
├─ color@3.1.2
├─ cosmiconfig@5.2.1
├─ css-color-names@0.0.4
├─ css-declaration-sorter@4.0.1
├─ css-select-base-adapter@0.1.1
├─ css-tree@1.0.0-alpha.33
├─ css-unit-converter@1.1.1
├─ cssnano-preset-default@4.0.7
├─ cssnano-util-raw-cache@4.0.1
├─ cssnano-util-same-parent@4.0.1
├─ cssnano@4.1.10
├─ csso@3.5.1
├─ dot-prop@4.2.0
├─ electron-to-chromium@1.3.199
├─ error-ex@1.3.2
├─ esprima@4.0.1
├─ hex-color-regex@1.1.0
├─ hsl-regex@1.0.0
├─ hsla-regex@1.0.0
├─ html-comment-regex@1.1.2
├─ import-fresh@2.0.0
├─ is-absolute-url@2.1.0
├─ is-arrayish@0.2.1
├─ is-color-stop@1.1.0
├─ is-directory@0.3.1
├─ is-obj@1.0.1
├─ is-resolvable@1.1.0
├─ is-svg@3.0.0
├─ last-call-webpack-plugin@3.0.0
├─ lodash.memoize@4.1.2
├─ lodash.uniq@4.5.0
├─ mdn-data@2.0.4
├─ node-releases@1.1.25
├─ object.values@1.1.0
├─ optimize-css-assets-webpack-plugin@5.0.3
├─ parse-json@4.0.0
├─ postcss-calc@7.0.1
├─ postcss-colormin@4.0.3
├─ postcss-convert-values@4.0.1
├─ postcss-discard-comments@4.0.2
├─ postcss-discard-duplicates@4.0.2
├─ postcss-discard-empty@4.0.1
├─ postcss-discard-overridden@4.0.1
├─ postcss-merge-longhand@4.0.11
├─ postcss-merge-rules@4.0.3
├─ postcss-minify-font-values@4.0.2
├─ postcss-minify-gradients@4.0.2
├─ postcss-minify-params@4.0.2
├─ postcss-minify-selectors@4.0.2
├─ postcss-normalize-charset@4.0.1
├─ postcss-normalize-display-values@4.0.2
├─ postcss-normalize-positions@4.0.2
├─ postcss-normalize-repeat-style@4.0.2
├─ postcss-normalize-string@4.0.2
├─ postcss-normalize-timing-functions@4.0.2
├─ postcss-normalize-unicode@4.0.1
├─ postcss-normalize-url@4.0.1
├─ postcss-normalize-whitespace@4.0.2
├─ postcss-ordered-values@4.1.2
├─ postcss-reduce-initial@4.0.3
├─ postcss-reduce-transforms@4.0.2
├─ postcss-svgo@4.0.2
├─ postcss-unique-selectors@4.0.1
├─ q@1.5.1
├─ rgb-regex@1.0.1
├─ rgba-regex@1.0.0
├─ simple-swizzle@0.2.2
├─ sprintf-js@1.0.3
├─ stable@0.1.8
├─ stylehacks@4.0.3
├─ svgo@1.3.0
├─ timsort@0.3.0
├─ unquote@1.1.1
└─ vendors@1.0.3
✨  Done in 16.58s.

2.2 编辑 webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    mode:"production",
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                ]
            },
            //添加loader
            {
                test:/\.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    "css-loader"
                ]
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: "15- webpack 压缩 JavaScript 代码",
            minify: {
                collapseWhitespace: true,//删除空格、换行
            },
        }),
        //添加插件
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        //添加插件
        new OptimizeCSSAssetsPlugin({})
    ],
};

2.3 重新编译

编译成功后，main.css

.hello{color:red}

到此 webpack 压缩 CSS 代码任务完成。

参考链接

好_快
关注
专栏目录
compression-webpack-plugin压缩前端代码&服务器nginx代理相关配置
Liuer_Qin的博客
12-02 1108
compression-webpack-plugin压缩前端代码&服务器nginx代理相关配置
Vue使用compression-webpack-plugin进行代码压缩
weixin_46759393的博客
09-29 1120
Vue使用compression-webpack-plugin进行代码压缩 一、安装插件 npm install compression-webpack-plugin --save-dev 二、配置vue.config.js const CompressionPlugin = require("compression-webpack-plugin") const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
webpack压缩js
08-22
压缩js 到页面，并且可以适当混淆加密以达到保护js代码的作用
Webpack——压缩css
weixin_42789698的博客
05-18 79
文章目录压缩css一、下载插件二、配置webpack.config.js 压缩css 一、下载插件 命令行执行：cnpm i optimize-css-assets-webpack-plugin -D 二、配置webpack.config.js webpack.config.js /** * 压缩css * 使用插件：optimize-css-assets-webpack-plugin * 1、下载插件：cnpm i optimize-css-assets-webpack-plugin -D * 2
Optimize-CSS-Assets-Webpack-Plugin 教程
最新发布
gitblog_01061的博客
08-12 328
Optimize-CSS-Assets-Webpack-Plugin 教程 optimize-css-assets-webpack-pluginA Webpack plugin to optimize \ minimize CSS assets.项目地址:https://gitcode.com/gh_mirrors/op/optimize-css-assets-webpack-plugin 1....
webpack中对CSS压缩
Coralpapy的博客
08-04 1123
1.在终端下载相关CSS压缩插件 PS D:\Webpack\03-webpackcss> npm i -D css-minimizer-webpack-plugin //webpack5以上官方推荐 //旧的命令如下 PS D:\Webpack\03-webpackcss> npm i -D optimize-css-assets-webpack-plugin 2.在webpack.config.js中引入压缩插件，并且在插件配置plugin:{ }中进行实例化 const CS.
webpack对css进行压缩
web工程师——小发发
03-10 390
在html中我们引用css代码一般是用link标签，如今我们借助webpack将css代码引入到我们的.js文件中，并让其生效。 接下来进入正题，我们将使用webpack中的css-loader和style-loader进行代码压缩。 大家一定要注意css-loader和style-loader style-loader style-loader是通过一个JS脚本创建一个style标签，里面包含一些样式。style-loader是不能单独使用的，因为它不负责解析css之前的依赖关系，每个loader
webpack5零基础入门-17CSS压缩
weixin_45636198的博客
05-19 429
​ 一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。可以看到css文件变成了一行。
css打包优化去重去无效代码purifycss-webpack purify-css -8
zhoulucky1993的博客
12-24 2783
1：确保自己的电脑已经安装了node和Git软件 2：自己在盘里随便创建一个文件夹一般为英文(也就是你自己的项目名称) 3：在新创建好的文件夹里面右键点击调出git指令窗口在窗口里面输入如下指令：     1：npm install webpack -g                 2:  npm install webpack-cli -g     3: npm init -y    ...
前端开源库-webpack-handle-css-loader
08-30
6. **源映射**：为了便于调试，`webpack-handle-css-loader`可能会确保生成源映射文件，使开发者可以在浏览器的开发者工具中查看原始CSS代码。 7. **PostCSS**：PostCSS是一个可以通过插件转换CSS的语言后处理器，...
Webpack 如何抽离、压缩 CSS 文件？
Celine921的博客
04-13 1034
webpack 抽离压缩 css
webpack（13）处理样式兼容问题和压缩css文件
weixin_45750073的博客
02-28 760
之前处理了JS的兼容问题，将高级语言转换成浏览器能识别的语言，同样的，在不同的浏览器，甚至不同版本的浏览器的之间样式也会存在兼容性的问题，现在我们就来解决样式的兼容性问题。1、下载依赖,postcss-loader依赖于postcss，postcss-loader需要使用postcss-preset-env来进行智能预设，决定样式如何进行兼容。2、基本使用，postcss-loader需要在css-loader的下一层，less-loader和scss-loader的上一层，顺序不能弄错。
06-webpack5学习-css压缩
纯黑色山羊
06-17 416
webpack5-css压缩
12. webpack4压缩css
weixin_43893483的博客
08-27 617
webpack4 css打包压缩optimize-css-assets-webpack-plugin
Webpack优化---压缩CSS
听海边涛声
07-21 225
Webpack优化---压缩CSS
webpack怎样压缩css？
高先生的猫
08-18 3539
webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建，比如vue官方就推荐使用webpack。 webpack可以使用css压缩插件OptimizecssAssetswebpackPlugin来压缩css文件。 该插件有什么作用？ 它将在webpack构建期间搜索css资源，并将优化\最小化css（默认情况下，它使用cssnano，但可以指定自定义css处理器）。 解决了extract-text-webpack-plu...
webpack压缩和分离css文件
qq_42309685的博客
09-01 249
项目目录如下： 打包预览（dist 和 index.html） 引入css文件（index.ts） import "./style/index.less"; console.log('entry'); 打包配置（webpack.prod.js） const webpackCommonConf = require('./webpack.common.js') const { merge } = require('webpack-merge') const { distPath } = require(
webpack生产环境配置-压缩css
肖帅的博客
03-24 254
压缩css 1，创建文件 2，下载安装包 npm install --save-dev optimize-css-assets-webpack-plugin 3，修改配置文件webpack.config.js const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'...
webpack代码压缩
qq_38850058的博客
06-01 637
JS压缩 webpack4 内置了 uglifyjs-webpack-plugin CSS压缩 使⽤ optimize-css-assets-webpack-plugin，同时使⽤ cssnano plugins: [ new OptimizeCSSAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssn...
Vue项目骨架屏实践：vue-skeleton-webpack-plugin
此外，`minimize`选项用于开启代码压缩，`quiet`选项用于控制是否在服务端渲染时输出日志信息。这些设置可以根据实际需求进行调整。 `vue-skeleton-webpack-plugin`为Vue项目提供了一种便捷的方式，通过预渲染骨架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值