如何配置webpack让浏览器自动补全前缀?

一、postcss-loader有什么用?

  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')()
    ]
}

  

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