heihei12305

🏍 自动清理构建目录产物

🚲 通过 npm scripts清理构建目录

rm -rf ./dist && webpack
rimraf ./dist && webpack

不过这个 rm -rf 看起来有点😨，不很优雅。

🛵 通过 clean-webpack-plugin 插件

默认会删除output指定的输出目录

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    entry:{
        app:'./src/app.js',
        search:'./src/search.js'
    },
    output:{
        filename:'[name][chunkhash:8].js',
        path:__dirname+'/dist'
    },
    plugins:[
        new CleanWebpackPlugin()
    ]
};

postCss插件自动补全css3前缀🏄‍♀

为什么css3需要添加前缀呢？🏊‍♀

原因：因为浏览器的标准还没有完全统一，目前来看主要还有四种浏览器内核，分别是：

• ⛹️‍♀️Trident(-ms)
• ⛹Geko(-moz)
• 🤾‍♀Webkit(-webkit)
• 🤾‍♂Presto(-o)

使用autoprefixer插件🏊

原理：🤼‍♂根据Cab I Use规则

module.exports = {
  module:{
    rules:[
      {
        test:/\.less$/,
        use:[
          'style-loader',
          'css-loader',
          'less-loader',
           {
            loader:'postcss-loader',
            options:{
              plugins:() => {
                require('autoprefixer')({
                    browsers:["last 2 version",">1%","iOS 7"]
                })
              }
            }
          }
        ]
       }
     ]
  }
}