玩转 webpack
程柳锋
腾讯高级工程师,IVWEB 团队社区和工程化负责人
27458 人已学习
新⼈⾸单¥68
课程目录
已完结/共 87 讲
加餐:webpack 5 专题内容 (3讲)
玩转 webpack
登录|注册
留言
36
收藏
沉浸
阅读
分享
手机端
回顶部
当前播放: 23 | PostCSS插件autoprefixer自动补齐CSS3前缀
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.75x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
01 | 课程介绍
02 | 内容综述
03 | 为什么需要构建工具
04 | 前端构建演变之路
05 | 为什么选择webpack
06 | 初识webpack
07 | 环境搭建:安装webpack
08 | webpack初体验:一个最简单的例子
09 | 通过npm script运行webpack
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代码压缩
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 | 构建异常和中断处理
38 | 构建配置包设计
39 | 功能模块设计和目录结构
40 | 使用ESLint规范构建脚本
41 | 冒烟测试介绍和实际运用
42 | 单元测试和测试覆盖率
43 | 持续集成和Travis CI
44 | 发布构建包到npm社区
45 | Git Commit规范和changelog生成
46 | 语义化版本(Semantic Versioning)规范格式
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服务
59 | webpack启动过程分析
60 | webpack-cli源码阅读
61 | Tapable插件架构与Hooks设计
62 | Tapable是如何和webpack进行关联起来的?
63 | webpack流程篇:准备阶段
64 | webpack流程篇:模块构建和chunk生成阶段
65 | webpack流程篇:文件生成
66 | 动手编写一个简易的webpack(上)
67 | 动手编写一个简易的webpack(下)
68 | loader的链式调用与执行顺序
69 | 使用loader-runner高效进行loader的调试
70 | 更复杂的loader的开发场
71 | 实战开发一个自动合成雪碧图的loader
72 | 插件基本结构介绍
73 | 更复杂的插件开发场景
74 | 实战开发一个压缩构建资源为zip包的插件
75 | 商城技术栈选型和整体架构
76 | 商城界面UI设计与模块拆分
77 | React全家桶环境搭建
78 | 数据库实体和表结构设计
79 | 登录注册模块开发
80 | 商品模块开发
81 | 订单模块开发
82 | 谈谈Web商城的性能优化策略
83 | 功能开发总结
84 | 玩转webpack结束语
加餐:webpack 5 新特性解析
加餐:bundle和bundless的差异
加餐:Vite的构建原理
本节摘要
登录 后留言

全部留言(36)

  • 最新
  • 精选
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
8
驴肉蒸饺
摘自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
3
6
驴肉蒸饺
同问关于postcss-loader的引入位置,为什么要写在less-loader的后面(即先执行postcss-loader)。请教老师。

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

2019-06-05
2
coder
老师,有关于postcss-loader,有个疑问,为什么这个loader是个Object?这个loader里面的options怎么还会有个plugins?这个和webpack的plugins有啥关联吗?

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

2019-07-23
1
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
2
脱尼
增加了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
wzx
编辑器主题好看,叫什么名字啊

作者回复: One Monokai

2019-06-04
czjdrj
老师,我用autoprefixer的browsers参数时,报了一个警告,让我把它替换成overrideBrowserslist,然后就好了。

作者回复: 额嗯,是因为 autoprefixer 最新的版本刚刚改了。改成overrideBrowserslist就好了

2019-06-04
2
为什么后置处理器在lessloader前引入呢?不应该是最后呢
2019-06-04
7
23
收起评论