手把手教你webpack3(11)PostCSS-Loader配置简述

简介:

POSTCSS-LOADER配置简述

前注:

文档全文请查看 根目录的文档说明

如果可以,请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里,发【Issues】。

DEMO地址

1、概述

postcss-loader 用于处理css代码,具有下列特点:

  1. 通常由 optionsplugins 两部分组成,plugins 虽然嵌套在 options 里,但实际上是通过其他插件生效的;
  2. 配置是可以独立的(每个配置的插件也是独立的)。详细介绍阅读【2.1】;

还有一些自定义配置,但由于篇幅所限,这里就不像之前那样详解每个配置了(主要是很多都依赖于其他东西)。

只写一些常用功能。

2、配置

2.1、独立配置

所谓独立配置,指的是在js文件中,引入的css文件如何被postcss-loader解析,取决于和他最近的那一个postcss的设置文件。

注:

对在css文件中,通过@import导入的css文件无效:

  1. 必须是通过通过import引入到js里面的css文件,才会被postcss-loader解析生效;
  2. 如果是a.css,通过@import './b.css'引入b.css文件,那么该配置对a.css生效,对b.css无效;
  3. 我查了很多资料,目前没找到能让postcss-loader对在css文件中,通过@import方式导入其他的css文件,进行生效的方法。如果有,请提 issues 给我。

优先级:

  1. webpack.config.js 中的module.rules属性里设置的优先级最高;
  2. 然后按顺序找,离css文件最近的postcss.config.js配置文件,遇见的第一个文件其次;
  3. 按顺序找的后面的文件优先级最低;
  4. 找不到配置会报错;

注(完)

先假设 webpack.config.js 里配置方式如下(无任何特殊配置):

// ...略略略
{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
        ]
}   
// ...略略略              

简单来说,postcss-loader 的配置文件名为:postcss.config.js

假设文件树结构如下:

.
|____app.js
|____webpack.config.js
|____index.html
|____postcss.config.js    // 1#设置文件
|____style
| |____postcss.config.js    // 2#设置文件
| |____style.css
|____style2
| |____bar.css
| |____postcss.config.js    // 3#设置文件

引用(import)结构是:

  1. app.js -> style/style.css
  2. app.js -> style2/bar.css

假如两个css文件都有一条css属性:box-sizing: border-box;

然后 style/postcss.config.js (2#)的设置如下(兼容性配置):

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: [
                // 加这个后可以出现额外的兼容性前缀
                "> 0.01%"
            ]
        })
    ]
}

style2/postcss.config.js (3#)的设置如下(默认配置):

module.exports = {}

经过postcss-loader的处理之后,有兼容性配置的css文件,其插入html文件后,css属性变为如下:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

无兼容性配置的css文件,其插入html文件后,css属性变为如下:

box-sizing: border-box;

说明一点,对于postcss-loader来说,他优先取同目录下的postcss.config.js的配置属性。

另外,由于2#和3#设置文件的存在,因此无论1#如何设置,都不会影响其效果。

假如css文件找不到同目录下的postcss.config.js文件,那么会依次往上级目录寻找,直到找到,或者抵达项目根目录为止(以上面这个目录结构为例,即webpack.config.js所在目录是根目录)

2.2、自定义配置文件路径

名称 类型 默认值 描述
config {Object} undefined Set postcss.config.js config path && ctx

在上面,我们写了postcss-loader的配置文件的使用方式,分别是:【写在webpack.config.js中】,【配置文件放在对应的css文件的同级目录或者上级目录】。

但是假如我们需要统一管理 postcss-loader 的配置文件,那么就需要通过 config 来处理。

示例代码如下:

{
    loader: 'postcss-loader',
    options: {
        config: {
            path: './config'    // 写到目录即可,文件名强制要求是postcss.config.js
        }
    }
}

表示会去 webpack.config.js 的同目录下去找文件夹 config,然后在该文件夹下找到 postcss.config.js 文件(文件名不能改变),从而读取配置。

假如这么写,会导致【放在对应的css文件,的同级目录或者上级目录,的postcss-loader的配置文件失效】。原因是优先级问题。

除此之外,还有一个context设置,略略略。

2.3、sourceMap

测试后,无效(开启与否文件大小不变)

3、插件

除了 autoprefixer 用于加兼容性前缀,其他基本都有更好的,比如stylelint不如用eslint系列替代。

3.1、autoprefixer

这个是最应该添加的插件了。

效果是对css文件添加兼容性前缀。

安装:

npm install autoprefixer --save

官方github地址:

https://github.com/postcss/autoprefixer

使用方式:

// postcss.config.js
let autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [
        autoprefixer({
            browsers: [
                // 加这个后可以出现额外的兼容性前缀
                "> 0.01%"
            ]
        })
    ]
}

效果:

应该是兼容性最强的配置方法了,例如box-sizing可以添加两个前缀,有些特性可以添加三个前缀,如下:

转换前

transform: rotate(0deg);

转换后:

-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);
名称 类型 默认值 描述

其他特性:

不仅可以添加前缀,也可以删除旧前缀(过时前缀)等。详细查看官方文档。

非特殊要求,直接使用上面这个配置就行了(如果不需要最多的前缀,可以把上面的改为

autoprefixer({
            browsers: [
                // 加这个后可以出现额外的兼容性前缀
                "> 1%"
            ]
        })

3、参考文章

PostCSS配置指北

目录
相关文章
|
10月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
10月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
10月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
302 5
|
10月前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分,实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置,以满足不同的构建和优化要求。
182 2
|
11月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
370 58
|
11月前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
317 58
|
11月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
239 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
10月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
155 3
|
10月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
247 6
|
10月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
264 7