移动端适配webpack配置px转rem或vh，vw

移动端适配常用百分比，rem，后来又多了一个vh，vw。当然在less，sass可以写计算规则来转换px，比较麻烦，打包一次搞定就好

px转rem的配置
安装依赖

npm install px2rem-loader -D --save

配置loader

var px2remLoader = {
	loader: 'px2rem-loader',
	options: {
		remUnit: 75
	}
}

完整如下

exports.cssLoaders = function (options, booLocal) {
	options = options || {};
	var cssLoader = {
		loader: 'css-loader',
		options: {
			sourceMap: options.sourceMap,
			modules: true,
			localIdentName: '[local]--[hash:base64:6]',	//class 名字 代替
			localIdentName: booLocal ? '[local]' : '[local]--[hash:base64:6]',	//class 名字 代替
			onlyLocals: true,
			importLoaders: 1,
		}
	};
	// px 转换成rem
	var px2remLoader = {
		loader: 'px2rem-loader',
		options: {
			remUnit: 75
		}
	}
	
	var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				})
			]
		}
	};
	function generateLoaders(loader, loaderOptions) {
		var loaders = [cssLoader, postcssLoader, px2remLoader];
		if (loader) {
			let option = {
				...loaderOptions,
				sourceMap: options.sourceMap,
			};

			loaders.push({
				loader: loader + '-loader',
				options: option
			});
		}

		if (options.extract) {
			if (process.env.NODE_ENV === 'production') {
				return [MiniCssExtractPlugin.loader].concat(loaders);
			} else {
				return ExtractTextPlugin.extract({
					use: loaders,
					publicPath: '../../', //解决 build css bg img 加载路径不对问题
					fallback: 'react-style-loader' // react-style-loader
				});
			}

		} else {
			return ['react-style-loader'].concat(loaders);
		}
	}

	return {
		css: generateLoaders(),
		postcss: generateLoaders('postcss'),
		less: generateLoaders('less', { javascriptEnabled: true }),
		sass: generateLoaders('sass', { indentedSyntax: true }),
		scss: generateLoaders('sass'),
		stylus: generateLoaders('stylus'),
		styl: generateLoaders('stylus'),
	};
};

exports.styleLoaders = function (options) {
	var output = [];
	var loaders = exports.cssLoaders(options, false);
	for (var extension in loaders) {
		var loader = loaders[extension];
		output.push(
			{
				test: new RegExp('\\.' + extension  + '$'),
				use: loader,
			}
		);
	}
	return output;
};

效果图

或者利用 postcss-pxtorem，postcss-loader下的插件

npm install postcss-pxtorem --save-dev

var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				}),
				require('postcss-pxtorem')({
					'rootValue': 75,
					propList: ['*']
				})
			]
		}
	};

完整代码

exports.cssLoaders = function (options, booLocal) {
	options = options || {};
	var cssLoader = {
		loader: 'css-loader',
		options: {
			sourceMap: options.sourceMap,
			modules: true,
			localIdentName: '[local]--[hash:base64:6]',	//class 名字 代替
			localIdentName: booLocal ? '[local]' : '[local]--[hash:base64:6]',	//class 名字 代替
			onlyLocals: true,
			importLoaders: 1,
		}
	};
	var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				}),
				require('postcss-pxtorem')({
					'rootValue': 75,
					propList: ['*']
				})
			]
		}
	};
	function generateLoaders(loader, loaderOptions) {
		var loaders = [cssLoader, px2remLoader];
		if (loader) {
			let option = {
				...loaderOptions,
				sourceMap: options.sourceMap,
			};

			loaders.push({
				loader: loader + '-loader',
				options: option
			});
		}

		if (options.extract) {
			if (process.env.NODE_ENV === 'production') {
				return [MiniCssExtractPlugin.loader].concat(loaders);
			} else {
				return ExtractTextPlugin.extract({
					use: loaders,
					publicPath: '../../', //解决 build css bg img 加载路径不对问题
					fallback: 'react-style-loader' // react-style-loader
				});
			}

		} else {
			return ['react-style-loader'].concat(loaders);
		}
	}

	return {
		css: generateLoaders(),
		postcss: generateLoaders('postcss'),
		less: generateLoaders('less', { javascriptEnabled: true }),
		sass: generateLoaders('sass', { indentedSyntax: true }),
		scss: generateLoaders('sass'),
		stylus: generateLoaders('stylus'),
		styl: generateLoaders('stylus'),
	};
};

exports.styleLoaders = function (options) {
	var output = [];
	var loaders = exports.cssLoaders(options, false);
	for (var extension in loaders) {
		var loader = loaders[extension];
		output.push(
			{
				test: new RegExp('\\.' + extension  + '$'),
				use: loader,
			}
		);
	}
	return output;
};

效果图如上

px转vw，vh
px转vw，vh利用postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

viewportWidth: 750, // 视窗宽度
viewportHeight: 1334,  // 视窗高度
unitPrecision: 6, 	// 保留小数
viewportUnit: 'vw', // 选择单位
selectorBlackList: [], // 不转换的类
minPixelValue: 1, // 最小单位
mediaQuery: false, 	// 排除媒体查询
landscapeUnit: 'vh', // 横屏时单位
fontViewportUnit: 'vw', // 字体使用的单位

在postcssLoader里配置如下

var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				}),
				// require('postcss-pxtorem')({
				// 	'rootValue': 75,
				// 	propList: ['*']
				// })
				require('postcss-px-to-viewport')({
					viewportWidth: 750, // 视窗宽度
					viewportHeight: 1334,  // 视窗高度
					unitPrecision: 6, 	// 保留小数
					viewportUnit: 'vw', // 选择单位
					selectorBlackList: [], // 不转换的类
					minPixelValue: 1, // 最小单位
					mediaQuery: false, 	// 排除媒体查询
					landscapeUnit: 'vh', // 横屏时单位
					fontViewportUnit: 'vw', // 字体使用的单位
				})
			]
		}
	};

xiao