postcss-loader有什么用?如何配置webpack让浏览器自动补全前缀

时间: 2020-04-07阅读: 1358标签: webpack

Postcss 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 css。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。从这个角度来说,PostCSS 的强大之处在于其不断发展的插件体系。

webpack4. 的配置里面,切记版本不同,postcss-loader的配置会有相应的变化。我们要使用浏览器自动补全工具首先要安装 postcss-loader并配合autoprefixer插件。


(1)首先将两个必要插件安装到本地依赖。

npm i postcss-loader autoprefixer -D


 (2) 在 webpack 中配置 module,

module:{
test: /\.less$/, use: [
'style-loader'
'css-loader',
'postcss-loader',
'less-loader',
]
}


 (3) 创建 postcss.config.js文件

module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"> 1%", // 必须大于 1% 用户使用的浏览器
//'last 2 versions', // 所有主流浏览器最近的 2个版本
],
grid: true
})
]
}

当然还有另外一种配置 postcss-loader 的方式,在 package.json 文件加:

"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
],

然后 创建 postcss.config.js

module.exports = {
plugins: [
require('autoprefixer')()
]
}

相信到这里你就会使用 浏览器自动补全工具啦


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/9410

你必须知道的webpack插件原理分析

在 webpack 中,专注于处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。它和 loader 有以下区别:loader 是一个转换器,将 A 文件进行编译成 B 文件,比如:将 A.less 转换为 A.css,单纯的文件转换过程。webpack 自身只支持 js 和 json 这两种格式的文件

最全的webpack.base.config.js文件中文注释

引入utils文件,此处主要用到了assetsPath()方法,用来根据开发模式或生产模式来使用config文件下的相应配置,引入config文件夹下index.js,使用打包或开发配置

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

让IDE识别webpack的别名alias

许多项目脚手架默认就会把src目录添加一个@别名,项目中实际引入时,虽然可以精简路径,但也带来一个很麻烦的问题:IDE无法识别这些别名,因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

为什么要用webpack?

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件;

webpack 前后端分离开发接口调试解决方案,proxyTable解决方案

如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法,请查阅其文档。在 localhost:3000 上有后端服务的话,你可以这样启用代理

webpack—url-loader 解决项目中图片打包路径问题

刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。下面我们就来分析下在webpack项目中图片的应用场景。

解决-webkit-box-orient: vertical在webpack打包后丢失问题

该方式比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。但是在现在一些框架中如(Vue,react项目中使用),会发现本地正常,打包线上后,该属性丢失

webpack Code Splitting浅析

Code Splitting是webpack的一个重要特性,他允许你将代码打包生成多个bundle。对多页应用来说,它是必须的,因为必须要配置多个入口生成多个bundle;对于单页应用来说,如果只打包成一个bundle可能体积很大,导致无法利用浏览器并行下载的能力

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!