webpack打包安装(三)之解决css、js等的兼容性问题

我们都知道浏览器对一些css以及js语法有一些兼容性的问题，为了解决这些兼容性问题我们可以在webpack构建时安装工具去解决兼容性问题。

首先，我们新建postcss.js与postcss.css文件，并在index.js中导入，确保代码构建后能在index.html中查看效果。

我们可以使用browserslist

1.browserslist

和之前的依赖文件一样，我们需要对其进行配置，在webpack.config.js中，增加browserslist。

其中：

“>1%”表示市场占有大于1%的

"last 4 version"表示最新的4个版本

"not ie <= 8"表示依然ie8以上的浏览器

2.postcss

postcss是一个JavaScript转换样式的一个工具。

安装：

npm i postcss postcss-cli -D

3.autoprefixer

一款css3打包后自动追加前缀插件

npm i autoprefixer -D

使用以上3个插件，就可以对css样式进行兼容了。

其中re.css是输出的css样式文件，./src/css/postcss.css 是要兼容样式的css样式文件。

npx postcss -u autoprefixer -o re.css ./src/css/postcss.css

执行命令后，我们可以看到兼容后的文件多了很多css语法。

 4.postcss-loader

安装

npm i postcss-loader -D

上面能正常运行后，我们就可以设置npm run build命令中的配置了。

 然后我们可以使用 npm run build 命令重新构建，可以看到这个css以及成功的兼容了。

5.postcss-preset-env

这个是postcss常用功能性的集合，为了能更好的对css样式进行兼容，我们可以安装下。

目前css的color可以设置为8位（其实就是rgba），但是有些浏览器不能有效的兼容，于是我们需要这个插件进行处理。

.test{
    width: 100%;
    height: 200px;
    display: flex;
    transition: all 0.5s;
    color: #12345678;
    background: linear-gradient(red ,green,blue);
}

npm i postcss-preset-env -D

配置在在之前的postcss-loader的下面添加就行了。

 通过重新构建后，我们可以看到，8位的color以及成功转换为了rgba格式。

 

为了能全局设置postcss的配置，我们可以新建一个postcss.config.js文件来进行设置。

 这样就可以直接使用postcss-loader了。