给css添加前缀（js，webpack）

给css添加前缀（js，webpack）

关于更多日常使用的公共类的操作方法，可以关注下小滑轮网站

代码中某些地方添加。

在项目中，有时需要在某个情况下需要添加css前缀，这个时间一般会用js给css添加。下面提供一个通用方法，用来添加前缀。

/**
 * @desc 对css属性针对不同浏览器加私有前缀
 * @desc 先计算下当前浏览器支持那个前缀，支持哪个，就增加那个前缀。并不是把所有的前缀。
 * style: 是字符串，例如： transform
 * return: 字符串 。例如： webkitTransform （驼峰模式，js插入css的属性都是驼峰格式）
 */
function prefixStyle (style) {
    let vendor = (() => {
        let elementStyle = document.createElement('div').style
        let tranformNames = {
            webkit: 'webkitTransform',
            Moz: 'MozTransform',
            O: 'OTransform',
            ms: 'msTransform',
            standard: 'transform',
        }
        for (let key in tranformNames) {
            if (elementStyle[tranformNames[key]] !== undefined) {
                return key
            }
        }
        return false
    })()
    if (vendor === false) {
        return false
    }
    if (vendor === 'standard') {
        return style
    }
    return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

用webpack给项目整体添加css前

完成这个需要3步，

1. 需要使用两个插件（postcss-loader， autoprefixer），请用（npm或者yarn）下载这两个插件。

2. 需要更改webpack.config.js文件配置，里面会用到这两个插件。

   在css的解析处，添加postcss-loader

            rules: [
                {
                    test: /\.css$/,
                    use: ["style-loader", "css-loader", "postcss-loader"]
                }

   在plugins 模块，添加一个plugin (autoprefixer)

    plugins:[require('autoprefixer')]

3. 在package.json 里需要添加browserslist。 这个是为了确定给什么版本的浏览器起作用。关于browserslist 的使用语法和规则，请看官网，Browserslist 的数据都是来自Can I Use的。

   "browserslist": [
    "Firefox > 20",
    "iOS >= 7",
    "ie >= 8",
    "last 5 versions",
    "> 5%"
     ]

   小滑轮网站上还有其的工具函数

   1. 防抖
   2. 节流
   3. 字符串
   4. 正则
   5. ......

可以去看看，希望对你的开发有帮助～