webpack配置css兼容性和压缩

html-css09

webpack配置css兼容性和压缩,第1张

第一步:需要安装 postcss , postcss-loader 和 postcss-preset-env 三个包。

第二步:在 webpack.config.js 的 css 的 loader 里配置 postcss-loader 。

第三步:配置 postcss.config.js ,然后配置 postcss-preset-env 插件,用来读取 package.json 文件中的 browserslist 配置。

第四步:在 package.json 文件添加 browserslist ,配置需要支持哪些浏览器。

压缩 css 需要用到 optimize-css-assets-webpack-plugin 。

用法很简单,引入插件之后,在 plugins 中实例化即可。

postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件,比如添加浏览器前缀,压缩 CSS 等。

配置 postcss-loader 时,可以在 webpack.config.js 中配置具体选项,也可以新建一个 postcss.config.js ,专门定义 postcss-loader 的配置。

这篇文档基于依赖包版本:

推荐使用文件 postcss.config.js 的方式:

env 取值 process.env.NODE_ENV ,可用来判断是开发模式还是生产模式。

当然也可以在 webpack.config.js 中,只是写起来有点冗余,尤其是需要在多个规则中用到 postcss-loader 时:

压缩 CSS 其他方法可以参考 Webpack 文档中 这一段 。

用 style-loader 时:

用 MiniCssExtractPlugin 时, 注意 sourcemap 得配置成“ inline ”,不然调试时仍旧无法定位到 .less 源码,只能定位到编译后的 CSS 文件。

-最低配置:1.7 GHz 处理器,512MB 内存,DirectX® 8 显卡,Windows® Vista/XP/2000,鼠标,键盘,互联网连接

-建议配置:Pentium 4 处理器(3.0GHz 或更高),1GB 内存,DirectX® 9 显卡,Windows® Vista/XP/2000,鼠标,键盘,互联网连接