走近webpack（4）--css相关拓展

　　咱们前面已经学了不少webpack基本的处理状况，一句话总结就是，一个优秀的webpack项目，主要的核心用法就是整合loader和plugin去处理你想要的任何需求。

　　下面，我们一块儿来学学如何用webpack来处理less，sass等预编译器。先看看如何用webpack处理less。

　　国际惯例，第一步是安装：

npm install less less-loader --save-dev

　　第二步，配置loader项:

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

　　最后，我们来写一个less试试，直接在src/css/目录下，新建一个pink.less文件并写一些代码：

@base :pink;
#lessDiv{
    width:300px;
    height:300px;
    background-color:@base;
}

　　还要在src/index.html中加入一个id名为#lessDiv的div，最重要的一点，不要忘了在src/entry.js中引入pink.less，引入的方法跟引入css文件是同样的。

　　不知道你们还记不记的我们在处理css文件的时候作过一件事情，也就是把css从js中分离出来，由于webpack打包是把css打包进js的，因此咱们修改一下loader的配置方式，跟前面的css是同样的，这里再也不赘述，直接上代码：

{
  test: /\.less$/,
  use: extractTextPlugin.extract({
        use: [{
            loader: "css-loader"
        }, {
            loader: "less-loader"
        }],
        fallback: "style-loader"
    })
  }

　　你能够试试，这两种代码打包以后会有什么样的区别，OK，咱们npm run server一下，会发现页面中已经出现了一个粉色的盒子。

　　那么说完了less，继续说一下sass。仍旧是安装，配置。。。很少说，直接上代码：

npm install node-sass --save-dev
npm install sass-loader --save-dev
/*若是安装报错，能够试一下cnpm或者分开单独安装*/

　　配置loader：

{
  test: /\.scss$/,
  use: [{
      loader: "style-loader" // creates style nodes from JS strings
  }, {
      loader: "css-loader" // translates CSS into CommonJS
  }, {
      loader: "sass-loader" // compiles Sass to CSS
  }]
}

　　跟less同样编写一个scss文件写入sass代码而且在entry.js中引入，别忘了在index.html中写个div：

// css/blue.scss
$color: blue;
#sassDiv {
  $width: 100%;
  width: $width;
  height:200px;
  background-color: $color;
}
// index.html加入
<div id="sassDiv"></div>
//entry.js中引入
import sass from './css/blue.scss';

　　一样的，把sass从js中分离，修改loader配置：

{
     test: /\.scss$/,
     use: extractTextPlugin.extract({
        use: [{
           loader: "css-loader"
         }, {
           loader: "sass-loader"
         }],
          fallback: "style-loader"
         })
 }

　　npm run server后发现蓝色的div已经出现。其实你们能够本身去试着写一下sass的配置。由于跟less甚至以前的css几乎是一摸同样的。没有什么大的区别。那么下面我们一块儿看看css3属性自动加上前缀，极大的方便咱们的开发。

　　自动加前缀，咱们须要用到postCss和autoprefixer，那么安装一下吧：

npm install --save-dev postcss-loader autoprefixer

　　咱们新建一个postcss.config.js，与webpack.config.js同级，而且写入相关代码，也就是引入autoprefixer：

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

　　而后把咱们以前写过的css-loader的配置修改一下：

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

　　分离：

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
    
}

　　那么，咱们随便在index.css中加上点css3的样式试试吧。至此，当你npm run build 以后多半会发现既不报错，可是index.css中也没有加上相应的前缀。那么你须要在package.json中写入以下配置：

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

　　什么意思呢？也就是全球浏览器使用率大于1%，最新的两个版本而且是ie8以上的浏览器。还有更多的参数能够查看这里https://github.com/ai/browserslist#queries。

　　增长了这个配置以后，再打包就彻底没问题啦。

　　那么咱们下面学习一下如何消除未使用的css，在实际项目中，咱们可能会引入不少样式库，组件库，或者随着项目需求的增长，咱们可能会添加一些新的css，而之前的css又不知道有没有用，也不敢去动，惧怕牵一发而动全身。因此咱们可使用一个插件，在打包的时候自动去除未使用的css样式：

/*PurifyCSS-webpack要依赖于purify-css这个包，因此这两个都安装一下，-D是--save-dev的简写，i是install的简写*/
npm i -D purifycss-webpack purify-css

　　而后咱们引入glod和purifycss-webpack插件：

const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
/*引入插件就很少说了，glob是node的一个对象，咱们须要在检查html模板以肯定是否用到了css的时候用到glob*/

　　而后，在plugins里这样配置：

new PurifyCSSPlugin({
    paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
/*glob.sync同步获取指定文件夹下的文件，这里的意思就是获取src下的全部html文件。有关node的知识不在这里多说，有兴趣的你们能够自行去学习*/

　　配置成功，咱们在src/index.css中写点没用的代码试试吧。发现打包后的css中并无咱们新加的没用的代码，成功！