webpack我遇到的一些坑

Posted 2020-06-14

我的第一个用于实验webpack的项目是一个拥有多个版本的项目。什么叫多个版本？这个项目对3个语言版本+3个不同城市版本+（移动端  + PC端），也就是3*3*2,18个版本。

我的第一次想法肯定是构建语言包，这让我减少了不少工作。但是因为这个项目我的想法用来实验webpack的，问题就出现在3个城市要求的域名不一样。开始的时候我很爽快的享受着webpack给我带来便利，然而在一次发布测试时，却出现问题了。

第一坑：在于css的background-image这个属性，当webpack -p这个命令经行压缩后，css的引入方式会变化。开发时的引入方式是直接把css转化为style标签插入到head中，当使用webpack -p时，css的引入方式变成了二进制流。坑就在这个二进制流的引入方式，使用这种方式引入css，那么css中必须使用绝对路径来引入文件（图片之类）。

解决办法：在webpack.config.js中配置output的添加publicPath属性指定域名，让webpack -p发布的时候css使用绝对路径，然而我这个项目还有坑在这一个项目有3个域名，要发布一次需要打包3次。

 

---

第二坑：webpack在发布的时候会帮助我们优化代码，比如css动画

@keyframes animation{
	0%{
		transform: rotate(0);
	}
	25%{
		transform: rotate(-180deg);
	}
	50%{
		transform: rotate(0);
	}
	75%{
		transform: rotate(-180deg);
	}
	100%{
		transform: rotate(0);
	}
}

　　这个会帮我们优化成

@keyframes animation{
	0%, 50%, 100%{
		transform: rotate(0);
	}
	25%, 75%{
		transform: rotate(-180deg);
	}
}

　　优化成这样，原理上是很好。

　　但是微信浏览器就坑了。无法识别