webpack之postcss集成
2024-09-01 09:32:45
项目 为了 兼容各个浏览器,需要加各种 c3前缀,如果手动的加肯定 相对比较麻烦,但是现在有webpack,gulp之类的 工具可以自动给我们加上,可以说效率上加速不少。如果 配置中 做个happypack打包缓存的话,配置的时候需要注意下,自己也踩了坑。
关键的一步就是:
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract('style',(NODE_ENV=='dev')?'happypack/loader?id=sass':'css!postcss!sass')
}
如果是 开发环境 就 用'happypack/loader?id=sass',是线上部署环境就用 'css!postcss!sass', 这个代表 'css-loader!postcss-loader!sass-loader'的省略,因为在开发的时候我们可以利用缓存打包,不需要添加前缀 可以加速我们打包的速度
另外在生产环境需要加上
commonOptions.postcss = [
require('autoprefixer')({
browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']
})
];
注意:commonOptions 是我本地 配置的一个 对象,
如:entry ,postcss ,plugins就是commonOptions的属性值
昨天在 配置这个的时候 就是因为忘记了 加sass-loader,弄的打包不能 完成 ,因为 项目是用scss的格式 管理的,所以 需要 用 'css-loader!postcss-loader!sass-loader'的顺序。
最新文章
- Requests 乱码
- java.sql.SQLException: ORA-00972: 标识符过长
- springMVC-数据绑定流程
- Match:Oulipo(POJ 3461)
- ruby 资源收集
- jQuery---EasyUI小案列
- js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( )) 有区别?
- FJNU 1159 Fat Brother’s new way(胖哥的新姿势)
- SPOJ MULTQ3 7299 Multiples of 3 (区间更新)
- eclipse安装插件的各种方法
- Server2008系统 FTP下载“当前的安全设置不允许”的解决方法
- oracle group by 使用
- 柯南君:看大数据时代下的IT架构(8)消息队列之RabbitMQ--案例(topic起航)
- hdu4864Task(馋)
- 简单的SQL查询,循环插入
- kubernetes in action - Services
- Swift 通过字符串创建控制器
- Java读写HDFS文件
- date命令转换日期命令提示date: illegal time format
- javaScript之jQuery框架