webpack配置postcss-loader注意事项(必须先配置postcss.config.js)

责编:menVScode 2018-03-13 17:01 阅读(841)

postcss-loader:在web开发中我们经常会使用css来构建页面的样式,在这个过程中为了考虑浏览器兼容问题,必须得使用兼容性前缀。这是我们可以通过 postcss-loader 来实现了,但是要注意得先配置 postcss.config.js。

安装

npm install postcss-cssnext postcss-loader --save-dev

postcss.config.js:postcss的配置信息需要单独在外面写配置文件才可以使用,文件位置与 webpack.config.js 同级

module.exports = {
    plugins: [
        require('postcss-cssnext')
    ]
}

配置 webpack.config.js

module.exports = {
	entry: Object.assign(entries(), {
	    // 用到什么公共lib(例如jquery.js),就把它加进vendor去,目的是将公用库单独提取打包
	    'vendor': ['jquery', 'avalon']
	}),
	output: {
	    path: path.join(__dirname, "dist"),
	    filename: "js/[name]-[hash].js"
	},
	module: {
	    rules:[
	        {
	            test:/\.css$/,
	            use: ExtractTextPlugin.extract({  
                    fallback: 'style-loader',  
                    use: [
                    	{
                    		loader: 'css-loader',
                    		options: {
                    			minimize:false // 启用/禁用 压缩
                    		}
                    	},
                    	{
                    		loader: 'postcss-loader'
                    	}
                    ]  
                })  
	        },
	        {
	        	test: /\.less$/,
			    use: ExtractTextPlugin.extract({
			        fallback: 'style-loader', 
			        use: [
                    	{
                    		loader: 'css-loader',
                    		options: {
                    			minimize:false
                    		}
                    	},
                    	{
                    		loader: 'postcss-loader'
                    	},
                    	{
                    		loader: 'less-loader'
                    	}
                    ]  
			    })
	        },
	        {
               test: /\.html$/,
               use: ['html-loader']
            },
	        {
	            test:/\.(jpg|gif|jpeg|gif|png)$/,
	            use:[
	                    {
	                        loader:'url-loader',
	                        options:{
	                            outputPath: 'images/', // 图片会被打包在 dist/images 目录下
	                            limit:10240 //大于10kb进行转码显示
	                        }
	                    }
                ]
	        }	
	        
				
	    ]
	},
	resolve: {
	    extensions: [".js", ".less", ".css"], // 后缀名自动补全
	    // root: [srcDir,nodeModPath],
	    alias: pathMap,
	    //alias:{
	    //	'jquery': path.resolve(__dirname, 'src/js/lib/jquery-1.12.4.js'),
		//	'avalon': path.resolve(__dirname, 'src/js/lib/avalon.shim.js')
	    //}
	},
	/*plugins: [
        new CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        }),
        new HtmlWebpackPlugin({
        	template:'./src/index.html'
        })
    ]*/
    plugins: plugins.concat(html_plugins())
}
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码