1. 程式人生 > >webpack之postcss集成

webpack之postcss集成

brush style 生產 pre chrom 管理 gin test class

項目 為了 兼容各個瀏覽器,需要加各種 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‘的順序。

webpack之postcss集成