当前播放: 23 | PostCSS插件autoprefixer自动补齐CSS3前缀
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
第一章:webpack与构建发展简史 (9讲)
01 | 课程介绍
免费
02 | 内容综述
免费
03 | 为什么需要构建工具
免费
04 | 前端构建演变之路
05 | 为什么选择webpack
06 | 初识webpack
07 | 环境搭建:安装webpack
免费
08 | webpack初体验:一个最简单的例子
09 | 通过npm script运行webpack
第二章:webpack基础用法 (12讲)
10 | webpack核心概念之entry
免费
11 | webpack核心概念之output
免费
12 | webpack核心概念之loaders
13 | webpack核心概念之plugins
14 | webpack核心概念之mode
15 | 解析ECMASCript 6和React JSX
16 | 解析CSS、Less和Sass
17 | 解析图片和字体
18 | webpack中的文件监听
19 | webpack中的热更新及原理分析
20 | 文件指纹策略:chunkhash、contenthash和hash
21 | HTML 、CSS和JavaScript代码压缩
第三章:webpack进阶用法 (16讲)
22 | 自动清理构建目录产物
23 | PostCSS插件autoprefixer自动补齐CSS3前缀
24 | 移动端CSS px自动转换成rem
25 | 静态资源内联
26 | 多页面应用打包通用方案
27 | 使用sourcemap
28 | 提取页面公共资源
29 | Tree Shaking的使用和原理分析
30 | Scope Hoisting使用和原理分析
31 | 代码分割和动态import
32 | 在webpack中使用ESLint
33 | webpack打包组件和基础库
34 | webpack实现SSR打包(上)
35 | webpack实现SSR打包(下)
36 | 优化构建时命令行的显示日志
37 | 构建异常和中断处理
第四章:编写可维护的webpack构建配置 (9讲)
38 | 构建配置包设计
39 | 功能模块设计和目录结构
40 | 使用ESLint规范构建脚本
41 | 冒烟测试介绍和实际运用
42 | 单元测试和测试覆盖率
43 | 持续集成和Travis CI
44 | 发布构建包到npm社区
45 | Git Commit规范和changelog生成
46 | 语义化版本(Semantic Versioning)规范格式
第五章:webpack构建速度和体积优化策略 (12讲)
47 | 初级分析:使用webpack内置的stats
48 | 速度分析:使用speed-measure-webpack-plugin
49 | 体积分析:使用webpack-bundle-analyzer
50 | 使用高版本的webpack和Node.js
51 | 多进程/多实例构建
52 | 多进程并行压缩代码
53 | 进一步分包:预编译资源模块
54 | 充分利用缓存提升二次构建速度
55 | 缩小构建目标
56 | 使用Tree Shaking擦除无用的JavaScript和CSS
57 | 使用webpack进行图片压缩
58 | 使用动态Polyfill服务
第六章:通过源代码掌握webpack打包原理 (9讲)
59 | webpack启动过程分析
60 | webpack-cli源码阅读
61 | Tapable插件架构与Hooks设计
62 | Tapable是如何和webpack进行关联起来的?
63 | webpack流程篇:准备阶段
64 | webpack流程篇:模块构建和chunk生成阶段
65 | webpack流程篇:文件生成
66 | 动手编写一个简易的webpack(上)
67 | 动手编写一个简易的webpack(下)
第七章:编写loader和插件 (7讲)
68 | loader的链式调用与执行顺序
69 | 使用loader-runner高效进行loader的调试
70 | 更复杂的loader的开发场
71 | 实战开发一个自动合成雪碧图的loader
72 | 插件基本结构介绍
73 | 更复杂的插件开发场景
74 | 实战开发一个压缩构建资源为zip包的插件
第八章:React全家桶和webpack开发商城项目 (10讲)
75 | 商城技术栈选型和整体架构
76 | 商城界面UI设计与模块拆分
77 | React全家桶环境搭建
78 | 数据库实体和表结构设计
79 | 登录注册模块开发
80 | 商品模块开发
81 | 订单模块开发
82 | 谈谈web商城的性能优化策略
83 | 功能开发总结
84 | 结束语
23 | PostCSS插件autoprefixer自动补齐CSS3前缀

23 | PostCSS插件autoprefixer自动补齐CSS3前缀

程柳锋
腾讯高级工程师,IVWEB团队社区和工程化负责人
84讲 84课时,约900分钟5519
单独订阅¥99
2人成团¥79
3
本节摘要
登录 后留言

精选留言(22)

  • 为什么后置处理器在lessloader前引入呢?不应该是最后呢
    2019-06-04
    2
    18
  • Andy
    请问你编译的时候,没有提示吗?
    Replace Autoprefixer browsers option to Browserslist config.
      Use browserslist key in package.json or .browserslistrc file.

      Using browsers option cause some error. Browserslist config
      can be used for Babel, Autoprefixer, postcss-normalize and other tools.

      If you really need to use option, rename it to overrideBrowserslist.

      Learn more at:
      https://github.com/browserslist/browserslist#readme
      https://twitter.com/browserslist

    作者回复: 最新的 autoprefixer 版本里面建议把 browserslist 写在 package.json 或者 . browserslistrc 文件里面去了(刚刚更新,😓)。

    不过你可以直接把browsers改成overrideBrowserslist也可以哈

    2019-06-06
    6
  • KaKa
    老师 我是主要以vue为主的开发人员··· 项目都是vue-cli3.0以上的 整个项目结构都改动很大,没有webpack的配置文件目录了。 只有一个vue.config.js文件··· 所以在vue-cli3.0以上的情况下 该如何配置呢? 跪求解答 跪求回复···· = =
    2019-07-02
    4
    3
  • 驴肉蒸饺
    摘自postcss/postcss-loader的github。
    After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.
    老师,您写的顺序是否是有问题的,可又未见有什么影响。请教老师。

    作者回复: postcss-loader 执行顺序必须保证在 css-loader 之前,建议还是放在 less或者 sass 等预处理器之后更好。即 loader 顺序:
    less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader

    其实 postcss-loader 放在 less-loader 之前问题也不大,平时使用的 less 里面的语法基本不会和 autoprefixer 处理产生冲突的。

    2019-06-05
    2
  • feidiy
    有单行注释代码的时候,需要把less loader放到后面,不然会报错的
    2019-10-24
    1
  • coder
    老师,有关于postcss-loader,有个疑问,为什么这个loader是个Object?这个loader里面的options怎么还会有个plugins?这个和webpack的plugins有啥关联吗?

    作者回复: 这个是通过loader的options传递postcss所需要用到的插件,这个插件是postcss生态下的。

    和webpack插件没有关联。

    2019-07-23
    1
  • gigot
    webpack-cli:3.3.3 版本会提示 TypeError: process.getuid is not a function,更新即可
    autoprefixer:
    1. 会提示 Replace Autoprefixer browsers option to Browserslist config.
      Use browserslist key in package.json or .browserslistrc file.
    将 browsers 参数换成 browserslist 放到 package.json 即可
    2. 提示 You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
    根目录创建 postcss.config.js 放 postcss-loader 的配置即可
    2019-07-08
    1
  • 驴肉蒸饺
    同问关于postcss-loader的引入位置,为什么要写在less-loader的后面(即先执行postcss-loader)。请教老师。

    作者回复: postcss-loader 的执行顺序写在 css-loader 之前即可,也就是需要在 css-loader 将样式转换成 cjs 对象插入到 js 代码前。

    2019-06-05
    1
  • ivan
    老师好,我在按照教程使用的时候发现autoprefixer未生效,postcss-loader版本是3.0.0,错误提示:
    You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

    当我安装官网增加了postcss.config.js 后生效,想请问下原因,另外您觉得像这些帮助开发的工具是单独在项目根目录下写配置文件好还是在webpack配置里面写比较好?感觉写外面可扩展性比较强,之后再改的话直接修改外面的配置文件就可以了,但是会造成项目中根目录下配置文件很多,如babel/eslint/stylelint等等
    module.exports = {
      plugins: [
        require('autoprefixer')
      ]
    }
    2019-11-16
  • 凭实力写bug
    打脸,一打开全是支持,硬说还有好多不支持
    2019-11-08
  • 刘先森
    有没有autoprefixer 的最佳实践配置?
    2019-10-26
  • 风马
    老师 我这样写 没警告了 但是前缀还是没加上 谢谢老师

    loader: 'postcss-loader',
                            options: {
                                plugins: () => {
                                    require('autoprefixer')({
                                        overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
                                    })
                                }
                            }
    2019-10-13
  • Delete
    老师为什么我写了
    {
            test: /\.less$/,
            use: [
              // "style-loader",
              MiniCssExtractPlugin.loader, // 不将css文件插入到style中,直接抽离
              { loader: "css-loader" },
              {
                loader: "postcss-loader",
                options: {
                  plugins: [require("autoprefixer")]
                }
              }, // 为了加属性前缀,一定要写在css-loader后面
              { loader: "less-loader" }
            ]
          },
    打包后为什么没有前缀呢?我都安装了postcss-loader以及autoprefixer

    作者回复: 把代码上传到guthub,然后贴个链接我看看。

    2019-09-29
    1
  • 肖生克的救赎
    autoprefixer没生效 plugins写在postcss.config.js里面
    2019-09-20
  • 开机密码******
    ERROR in ./app/component/download/download.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./node_modules/postcss-loader/src??ref--6-3!./app/component/download/download.scss)
        Module build failed (from ./node_modules/postcss-loader/src/index.js):
        SyntaxError
        
        (4:8) Unknown word
        
          2 |
          3 | .down {
        > 4 | // height:5.1rem;
            | ^
          5 | padding: 0 .8rem;
          6 | color: #fff;
        
    请问老师,autoprefixer 不能解析行内注释,这问题,应该怎么解。百度了大半天,都没找到解决办法!求解!
    2019-09-05
  • 因为有你心存感激
    ERROR in ./src/search.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/Postcss-loader/src??ref--6-3!./src/search.less)
        Module build failed (from ./node_modules/Postcss-loader/src/index.js):
        BrowserslistError: Unknown browser query `ios7`. Maybe you are using old Browserslist or made typo in query.
            at unknownQuery (D:\webpack\my-project\node_modules\browserslist\index.js:201:10)
            at Function.select (D:\webpack\my-project\node_modules\browserslist\index.js:962:15)
            at D:\webpack\my-project\node_modules\browserslist\index.js:252:33
            at Array.reduce (<anonymous>)
            at resolve (D:\webpack\my-project\node_modules\browserslist\index.js:234:18)
            at browserslist (D:\webpack\my-project\node_modules\browserslist\index.js:353:16)
            at Browsers.parse (D:\webpack\my-project\node_modules\autoprefixer\lib\browsers.js:66:12)
            at new Browsers (D:\webpack\my-project\node_modules\autoprefixer\lib\browsers.js:48:26)
            at loadPrefixes (D:\webpack\my-project\node_modules\autoprefixer\lib\autoprefixer.js:101:20)
            at plugin (D:\webpack\my-project\node_modules\autoprefixer\lib\autoprefixer.js:112:20)
            at LazyResult.run (D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:295:14)
            at LazyResult.asyncTick (D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:208:26)
            at D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:250:14
            at new Promise (<anonymous>)
            at LazyResult.async (D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:246:23)
            at LazyResult.then (D:\webpack\my-project\node_modules\postcss\lib\lazy-result.js:127:17)
            at Promise.resolve.then.then (D:\webpack\my-project\node_modules\Postcss-loader\src\index.js:142:8)
    2019-09-05
  • coder
    关于autoprefixer的选项,我看官方文档,可以在postcss-preset-env里设置,是吗老师?

    postcss-preset-env includes autoprefixer, so adding it separately is not necessary if you already use the preset.


    来源:https://webpack.js.org/loaders/postcss-loader/#autoprefixing
    2019-07-23
  • 流浪又怎样
    if (!e && fileOwnerId === process.getuid()) utimesSync(openCollectivePath, now, now);
    TypeError: process.getuid is not a function

    老师,我运行 npm run build 的时候会报以上错误,但是并不影响代码的打包构建,请问这是什么问题呢?
    2019-07-01
    1
  • Geek_5541c1
    增加了autoprefixer后,推荐使用在package.json中配置 browserslist 来配置或者在.browserslistrc 文件中配置browsers属性

    作者回复: 嗯嗯,是的,最新版本的 autoprefixer 有修改,不过也可以用 overrideBrowserslist,这样就不会有 warning 了。

    2019-06-16
  • vfv001
    autoprefixer官方还是建议用browserslist写在package.json里
    https://github.com/browserslist/browserslist#readme

    作者回复: 之前使用 browsers 的写法是ok的,新版本会有 warning 警告提升,可以换成 overrideBrowserslist 这样就不会有 warning 了。

    当然还是建议采用新版本的写法

    2019-06-06
收起评论
看过的人还看
重学前端

程劭非(winter)  前手机淘宝前端负责人

58讲 | 33179 人已学习

¥99
TypeScript开发实战

梁宵  搜狗营销事业部高级架构师

47讲 | 3079 人已学习

拼团 ¥99 原价 ¥129
浏览器工作原理与实践

李兵  前盛大创新院高级研究员

43讲 | 6345 人已学习

拼团 ¥79 原价 ¥99
Node.js开发实战

杨浩  腾讯高级工程师

57讲 | 3917 人已学习

拼团 ¥99 原价 ¥129