webpack学习（十）：分离压缩css

系统管理员 2022-04-06 18:40 239阅读 0赞

**demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]**  
继上一次配置完 sass: [https://blog.csdn.net/qq593249106/article/details/84933362][https_blog.csdn.net_qq593249106_article_details_84933362]

## 分离使用MiniCssExtractPlugin ##

webpck 4+ 已经将 ExtractTextPlugin 废弃了, 官网也支持使用 MiniCssExtractPlugin 来分离 css, 它相对 ExtractTextPlugin 有更多的优点

## 安装 ##

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

## MiniCssExtractPlugin用于生产模式 ##

注意 MiniCssExtractPlugin 插件用于生产模式, 如果在开发模式就不要用, 否则在热更新问题上会出现问题, 定义一个变量 devMode 区别是什么模式

## 配置 webpack.config.js ##

引入 MiniCssExtractPlugin, 在 rules 修改配置, 并在 plugins 中使用:

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    var devMode = false; //标志是否开发模式
    
    
    module.exports = { 
        mode: 'development',
        entry: './src/components/index/index.js', //入口文件
        devtool: 'inline-source-map', // 不同选项适用于不同环境
        devServer: { 
            contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
            port: 8080 //端口号设为8080, 默认也是8080
        },
        module: { 
            rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
                { 
                    exclude: /node_modules|packages/, //路径
                    test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                    use: 'babel-loader', //使用的加载器名称
                },
                { 
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader',
                    ],
                },
            ]
        },
        plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
            new CleanWebpackPlugin(['dist']), //设置清除的目录
            new HtmlWebpackPlugin({ 
                filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
                template: "./src/components/index/index.html" //指定模板文件的位置
            }),
            new MiniCssExtractPlugin({ 
                filename: 'css/[name].css', //类似出口文件
            }),
        ],
        output: { 
            filename: 'bundle.js', //根据入口文件输出不同出口文件
            path: path.resolve(__dirname, 'dist')
        }
    };

## 打包 ##

终端输入 npm run build, 打开 index.html  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
可以发现引入 css 样式的方式变成了 link, 同时 dist 目录下多了一个 css 文件夹, 里面多了一个 main.css 文件:

|- /dist
      |- /css
         |- main.css //分离出来的css文件
      |- bundle.js //入口文件
      |- index.html
    |- /node_modules
    |- /node_modules
    |- /src //用于放源文件的文件夹
      |- /components
      |- /index //模板文件
        |- index.html //模板文件
        |- index.js //入口文件
        |- App.js //react主文件
        |- index.scss //样式文件
    |- package.json
    |- webpack.config.js //webpack配置文件

到这里分离 css 完成了, 现在要对分离之后的 css 文件进行压缩

## 压缩使用OptimizeCSSAssetsWebpackPlugin ##

它将在Webpack构建期间搜索CSS资源，并将优化\\最小化CSS（默认情况下，它使用cssnano，但可以指定自定义CSS处理器）, 解决了extract-text-webpack-plugin CSS重复问题：由于extract-text-webpack-plugin仅捆绑（合并）文本块，如果它用于捆绑CSS，则捆绑包可能具有重复的条目（块可以是重复的，但是当合并时，可以创建重复的CSS）。

## 安装 ##

npm install optimize-css-assets-webpack-plugin --save-dev

## 配置 webpack.config.js ##

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    var devMode = false; //标志是否开发模式
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    
    
    module.exports = { 
        mode: 'development',
        entry: './src/components/index/index.js', //入口文件
        devtool: 'inline-source-map', // 不同选项适用于不同环境
        devServer: { 
            contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
            port: 8080 //端口号设为8080, 默认也是8080
        },
        module: { 
            rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
                { 
                    exclude: /node_modules|packages/, //路径
                    test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                    use: 'babel-loader', //使用的加载器名称
                },
                { 
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader',
                    ],
                },
            ]
        },
        plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
            new CleanWebpackPlugin(['dist']), //设置清除的目录
            new HtmlWebpackPlugin({ 
                filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
                template: "./src/components/index/index.html" //指定模板文件的位置
            }),
            new MiniCssExtractPlugin({ 
                filename: 'css/[name].css', //类似出口文件
                chunkFilename: 'css/[id].css'
            }),
            new OptimizeCssAssetsPlugin({ 
                assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
                cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。
                cssProcessorOptions: {  safe: true, discardComments: {  removeAll: true } }, //传递给cssProcessor的选项，默认为{}
                canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
            })
        ],
        output: { 
            filename: 'bundle.js', //根据入口文件输出不同出口文件
            path: path.resolve(__dirname, 'dist')
        }
    };

## 打包 ##

终端输入 npm run build, 查看 style.css 文件, 发现已经被压缩为一行, 压缩成功  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20181210010905991.png][https_img-blog.csdnimg.cn_20181210010905991.png]

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84933362]: https://blog.csdn.net/qq593249106/article/details/84933362
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/41925e8a1d3740ce88d8b199d3b10050.png
[https_img-blog.csdnimg.cn_20181210010905991.png]: /images/20220406/087f08778d804a2d9452bf4e92eb459f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 开启gzip压缩

开启gzip压缩可以有效压缩资源体积，压缩比率在3到10倍左右，可以大大节省服务器的网络带宽，提高资源获取的速度，但需要注意的是：并不是经过gzip压缩之后，所有文件都会变小。

谁借莪１个温暖的怀抱￠/ 2022年11月28日 13:25/ 0 赞/ 647 阅读

相关如何压缩自己的css和js,请问webpack如何压缩css和js，求具体例子代码，谢谢。

![257043e773be206e57c63b19ff0c1a72.png][] 小女王的骑士可以用UglifyJsPlugin压缩js和css,如果需要需要单独把cs

绝地灬酷狼/ 2022年09月02日 14:55/ 0 赞/ 128 阅读

相关 webpack：js、css、es6装载与压缩配置-学习笔记

文章目录 webpack：js、css、es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loa

深碍√TFBOYSˉ_/ 2022年08月31日 13:19/ 0 赞/ 136 阅读

相关 webpack处理css

在[神奇的babel][babel]中我们提到了babel-loder的使用，那么webpack声称可以处理任何类型的文件，css该怎么处理呢，好，我们来走一遍首先介绍下s

电玩女神/ 2022年06月18日 03:54/ 0 赞/ 198 阅读

相关 webpack入门（六）：webpack 打包 css文件

上一篇，我们说了使用webpack.config.js 来设置webpack，而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：老规矩，一步

朴灿烈づ我的快乐病毒、/ 2022年05月28日 00:39/ 0 赞/ 327 阅读

相关 webpack4使用optimize-css-assets-webpack-plugin压缩单独的css文件

1.安装 npm install optimize-css-assets-webpack-plugin --save-dev 2.使用 2.1.普通压缩

系统管理员/ 2022年05月15日 11:54/ 0 赞/ 293 阅读

相关 webpack学习（十）：分离压缩css

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

系统管理员/ 2022年04月06日 18:40/ 0 赞/ 240 阅读

相关 Webpack打包css

1、编写src/css/main.css ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

太过爱你忘了你带给我的痛/ 2022年04月06日 08:08/ 0 赞/ 364 阅读

相关 webpack4 单独抽离打包 css 的新实现

webpack4 单独抽离打包 css 的新实现前言 > 之前我们使用的打包 css 无非两种方式：① 将 css 代码打包进入口 js 文件中；② 使用第三方

红太狼/ 2022年03月27日 07:12/ 0 赞/ 311 阅读

相关 webpack4 css打包压缩问题

这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！ webpack4 在配置上其实是可

谁借莪１个温暖的怀抱￠/ 2022年02月27日 04:10/ 0 赞/ 349 阅读