webpack之postcss集成
2021-06-08 22:04
标签：rip .post 开发环境 一个 stc mon 本地 row test 项目 为了 兼容各个浏览器，需要加各种 c3前缀，如果手动的加肯定 相对比较麻烦，但是现在有webpack，gulp之类的 工具可以自动给我们加上，可以说效率上加速不少。如果 配置中 做个happypack打包缓存的话，配置的时候需要注意下，自己也踩了坑。 关键的一步就是： 如果是 开发环境 就 用‘happypack/loader?id=sass‘，是线上部署环境就用 ‘css!postcss!sass‘， 这个代表 ‘css-loader!postcss-loader!sass-loader‘的省略，因为在开发的时候我们可以利用缓存打包，不需要添加前缀 可以加速我们打包的速度 另外在生产环境需要加上 注意：commonOptions 是我本地 配置的一个 对象， 如：entry ，postcss ，plugins就是commonOptions的属性值 昨天在 配置这个的时候 就是因为忘记了 加sass-loader，弄的打包不能 完成 ，因为 项目是用scss的格式 管理的，所以 需要 用 ‘css-loader!postcss-loader!sass-loader‘的顺序。 webpack之postcss集成 标签：rip .post 开发环境 一个 stc mon 本地 row test 原文地址：http://www.cnblogs.com/laneyfu/p/7305826.html{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract(‘style‘,(NODE_ENV==‘dev‘)?‘happypack/loader?id=sass‘:‘css!postcss!sass‘)
}
commonOptions.postcss = [
require(‘autoprefixer‘)({
browsers: [‘last 10 Chrome versions‘, ‘last 5 Firefox versions‘, ‘Safari >= 6‘, ‘ie > 8‘]
})
];
上一篇：js题集6