[JavaScript知识库]webpack5打包原理及应用（样式篇）

webpack5打包原理及应用（样式篇）

关键词：style-loader, css-loader, less-loader, browserslist, .browerslistrc, postcss-loader, autoprefixer, postcss-preset-env, postcss-config.js, importLoaders

less-loader 使用注意事项

npx less 入口文件路径 [转换后的css]

对于less-loader而言，需要先进行less的安装，才能讲less转换成css
=> 最后再配置中module.rules规则：

{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'] 
    // 从右往左， 从下往上的执行顺序 使用less-loader时候需要先安装less
}

备注：需要先安装 less, less-loader

browserslist 使用注意事项

注意：该命令可以查询经设置后的兼容浏览器版本

npx browserslist

备注：需要先安装 browserslist

postcss使用注意事项

可以用于设定兼容浏览器版本的前缀

① 手动执行方式

# 特别注意：此处如果要使用命令行时要升级到新版本node，本人使用16.13.0时可行

# 该命令无法进行前缀增加
npx postcss -o result.css ./src/asset/css/test.css 

# 安装了autoprefixer之后，使用如下命令
npx postcss --use autoprefixer -o result.css ./src/asset/css/test.css

相关文件：

/* 使用的browserslist配置如下：

> 1%
last 2 version
not dead 

*/

/* 其中使用test.css如下： */
.title {
    display: grid;
    transition: all .5s;
    user-select: none;
}
/* 生成的result.css如下 */
.title {
    display: grid;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

备注：需要先安装 postcss, 如果要使用命令行则需要安装postcss-cli, 如果需要加入浏览器前缀，则需要安装 autoprefixer；注意node版本

② 自动执行方式

设置配置文件中module.rules，进行如下配置：

{
    test: /\.css$/,
    use: [
        'style-loader', 
        'css-loader', 
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        require('autoprefixer')
                    ]
                }
            }
        }
    ] // 从右往左， 从下往上的执行顺序
},

备注：需要先安装 postcss-loader，才能实现自动转化

使用postcss-preset-env

使用原因：由于需要兼容一些CSS中比较新的写法，使用简单的autoprefixer无法进行转换

{
    test: /\.css$/,
    use: [
        'style-loader', 
        'css-loader', 
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    // 由于使用了postcss-preset-env 故 autoprefixer 是包含在其中的，不需要重复指定
                    // plugins: ['autoprefixer']
                    plugins: ['postcss-preset-env']
                }
            }
        }
    ] // 从右往左， 从下往上的执行顺序
},

验证案例：

/* 使用新语法 #12345678 , 可以指定颜色加透明度 */
color: #12345678;

/* 经过处理后会变成 */
color: rgba(18,52,86,0.47059);

备注：需要先安装 postcss-preset-env，才能实现新CSS语法兼容转化

使用 postcss.config.js 进行postcss插件配置

// 新建文件postcss.config.js并加入如下内容:
module.exports   = {
    plugins: [
        'postcss-preset-env'
    ]
}
// 在webpack配置中则可以变更为:
{
    test: /\.less$/,
    use: [
        'style-loader', 
        'css-loader', 
        'postcss-loader',
        'less-loader'
    ] // 从右往左， 从下往上的执行顺序
},

备注：由于postcss是针对css进行处理, 故在less-loader转化完再进行处理(从后到前的处理顺序)

使用 importLoaders

🚀 特别注意：
如果在css中使用@import导入了其他的css文件,打包过程中在postcss-loader的插件进行了兼容性处理后,再交给css-loader,css-loader可以处理@import,但是无法回头再进行兼容性处理;

🎪 可行操作：
可以通过设置css-loader的option来实现导入前面使用过的loader

{
    test: /\.css$/,
    use: [
        'style-loader', 
        {
            loader: 'css-loader',
            options: {
                importLoaders: 1   // 1 代表导入前一个postcss-loader，可以为数字n 
            }
        }, 
        'postcss-loader'
    ] // 从右往左， 从下往上的执行顺序
},