冗长的

最近学习了基于vue-cli2的webpack，又强行配置了vue-cli2 webpack，感觉身体被掏空了。但是我收获了很多，至少掌握了webpack的一些基本例程，开发环境和生产环境的概念，根据不同的环境编写不同的webpack配置，以及一些常用插件的用法。

问题来了

不用自己配置webpack，打开一个基于vue-cli的项目是非常酷的，但是当我高兴的时候，发现了一个问题，就是项目打包前后的css前缀不一致，如下(浏览器：Chrome):

-在app.vue下为img添加样式

img { display: flextransform : translate x(200px)}-打包前的img风格(即开发环境)

-包装后的img风格(即生产环境)

根据以上可以看出打包前后元素的css前缀不一致。当我们为一个元素设置css3属性时，我们希望它与浏览器前缀兼容。Vue-cli也给了我们这样的功能(通过配置postcss的autoprefixer)

-postss配置是用。postcssrc.js，

module . exports={ ' plugins ' : { ' postss-import ' : { }，' postss-URL ' : { }，//toedit目标浏览器：使用package.json中的' browsers list '字段' autoprefixer ' : { } }浏览器规则写在package.json上，

浏览器列表' : ['1% '，'最近2个版本'，'非ie=8 ']-与开发环境风格相关的加载程序(build/webpack.dev.conf.js)

module : { rule s : utils . style loaders({ source map : config . dev . CSS source map，usepostcss : true })}-与生产环境样式相关的加载程序(build/webpack.prod.conf.js)

module : { rule s : utils . style loaders({ source map : config . build . production source map，extract3360true，usepostcss:true})}，从上面可以看出，vue-cli的开发环境和生产环境都使用postcss，它们的配置是一样的。那么为什么打包前后元素的css前缀不一致呢？

锁定问题

我们可以分析比较build/webpack.dev.conf.js和build/webpack.prod.conf.js这两个文件影响css的无非是处理模块中样式的加载器和处理css的插件。从上面我们可以看出，影响前缀的postcss的加载器在两个链接中是一致的，所以我们可以知道问题出在处理css的插件上。

经过调查，发现webpack.prod.conf.js配置中有两个css处理插件，如下

这是为了提取和分离css文件，不会影响css前缀。如果排除，问题将被锁定在OptimizeCSSPlugin插件上。更进一步，当我们对OptimizecssPlugin插件进行注释，然后进行打包测试的时候，其实发现开发环境和生产环境的CSS前缀此时是一致的，就是这样！

让我们打开npm官方网站，搜索这个家伙https://www。npmjs.com/package/optimize-css-assets-webpack-plugin,这是一个优化和压缩CSS代码的插件，但是它非常令人失望，并且文档很少。

但是我们注意到有一个关键的句子：

搞什么鬼？该产品依赖于cssnano。这个插件也用来优化css格式、前缀等等。同时，还有一个autoprefixer配置参数。直接去官网(这个好像需要一面墙)找https://cssnano.co/的autoprefixer(借助翻译很难找到):

根据浏览器选项删除不必要的前缀。请注意，默认情况下，它不会给CSS文件添加新的前缀，这可以解决和清除我们的问题。本来这个插件的AutoPrefix(默认应该是真的)删除了它认为不必要的前缀，而postcss的AutoPrefix增加了我们设置的浏览器范围的前缀，所以完全冲突。

解决问题

最后，在github上找到解决方案(忘记复制并找到地址，但不要说为什么要这样设置，这需要深入这个插件的源代码)。在build/webpack.prod.conf.js文件中，添加autoprefixer:false以禁用它并避免冲突。

代码开启：

新的OptimizeCSSPlugin({ csprocessor options 3360 config . build . production source map？{safe: true，map: false，autoprefixer : false } : { safe 3360 true，autoprefixer: false}})，结论

最后，如果我们看看dev和build生成的css前缀，应该是相同的：

问题的原因是：OptimizeCSSPlugin依赖于cssnano，而cssnano还有一个autoprefixer配置参数，用来删除不必要的前缀(有些浏览器中的必要前缀会被误删)，这与postcss的autoprefixer效果冲突，所以被禁用。

现在打包的前缀与我们设置的浏览器范围一致。感觉整篇文章有点啰嗦，不过这是我解决这个问题的方法，不过做个记录。如果分析中有什么问题，请指出来。谢谢大家！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。