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

2021-12-11 17:58:19 阅读：186 来源： 互联网

打包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文件被压缩了

标签：文件,style,less,样式,loader,js,css
来源： https://blog.csdn.net/Celester_best/article/details/121875997

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

打包css资源

打包less资源

样式文件提取

css文件的提取

less文件的提取

压缩文件