webpack5-打包css等样式资源，css等样式文件提取，css等样式文件压缩

本文详细介绍了如何使用webpack5打包css和less资源，包括如何配置style-loader和css-loader，以及如何通过mini-css-extract-plugin进行样式文件提取，以避免样式嵌入js导致的文件体积增大。此外，还讲解了利用optimize-css-assets-webpack-plugin进行css文件压缩，提升页面加载速度。

打包css资源

加载css资源需要安装style-loader，css-loader库

配置如下：

   module: {
        rules: [
            // 在rules中写详细的loader配置
            // 打包css资源
            {
                // 正则表达式,匹配那些文件，匹配以.css结尾的文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // 创建style标签，将js的样式资源插入进去，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串。
                    'css-loader'
                ]
            }
        ]
    },

注意：

use数组中loader执行顺序：从右到左，从下到上，依次执行。

示例：

//index.html
<body>
    <div>webpack5学习</div>
    <!-- 注释 -->
    <div>html压缩</div>
    <div class="box1"></div>
</body>

//index.js中引入css文件
import './css/style1.css'
function add(a, b) {
    return a + b;
}

console.log(add(1, 3))

//css文件
.box1 {
    width: 100px;
    height: 100px;
    background-color: aqua;
    margin: 10px;
}

执行webpack命令

可以看到编译了css文件

输出文件中也嵌入了css文件

在浏览器中运行打包输出的index.html文件，可以看到样式已经嵌入到style标签中了

打包less资源

安装 less-loader，less库

配置如下：

            // 不同的文件必须配置不同的loader处理，所以less和css文件的处理不能放在一起
            //加载less文件
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载less-loader和less库
                    'less-loader'
                ]
            }

示例：

//html文件
<body>
    <div>webpack5学习</div>
    <!-- 注释 -->
    <div>html压缩</div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

//js文件
import './css/style1.css'
import './css/style2.less'
function add(a, b) {
    return a + b;
}

console.log(add(1, 3))

//less文件
.box2{
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
}

执行webpack命令

可以看到打包了less文件

输出文件中也嵌入了less文件

在浏览器中运行，可以看到效果

样式文件提取

从上面的例子中可以看到打包之后，css和less文件都嵌入在js中，这样js文件会很大，导致加载速度变慢，我们可以提取样式文件使样式文件在单独的文件夹中。

分析：

因为webpack打包时，css-loader会将css文件嵌入到js中，然后再经过style-loader创建style标签，将样式插入，所以打包之后的css样式是在js文件，js太大影响加载速度和性能。

在提取时需要mini-css-extract-plugin插件，并且不能使用style-loader。需要使用mini-css-extract-plugin自己的loader替代style-loader

安装mini-css-extract-plugin

css文件的提取

配置

//plugins中的配置
    // 插件
    plugins: [
        // 详细的plugins配置
        // 创建HtmlWebpackPlugin对象
        new HtmlWebpackPlugin({
            // 以./src/index.html为模板，并自动引入打包输出的所有资源（js或者css）
            template: './src/index.html',
            minify: {
                // // 移除空格
                // collapseWhitespace: true,
                // // 移除注释
                // removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            // 对css文件重命名
            filename: 'css/built.css'
        }),
    ],

//module中rules的配置
            {
                // 正则表达式,匹配那些文件，匹配以.css结尾的文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // 创建style标签，将js的样式资源插入进去，添加到head中生效
                    // 'style-loader',
                    // 将css文件提出来不能使用style-loader，需要使用mini-css-extract-plugin自己的loader
                    // 作用将js中的css提取成单独文件
                    MiniCssExtractPlugin.loader,
                    // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串。
                    'css-loader'
                ]
            },

执行webpack命令

可以看到输出文件中生成了css文件夹，并且在输出的index.html文件中引入了css文件

less文件的提取

            //加载less文件
            {
                test: /\.less$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载less-loader和less库
                    'less-loader'
                ]
            }

运行webpack命令之后，可以发现less文件也被打包到built.css文件中了

压缩文件

安装optimize-css-assets-webpack-plugin插件

引入optimize-css-assets-webpack-plugin插件

// 压缩css文件的插件
const OptimizeCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')

创建optimize-css-assets-webpack-plugin对象

        // 压缩css文件
        new OptimizeCssAssetsWebpackPlugin()

执行webpack命令，可以看到输出的css文件被压缩了