走近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中並無咱們新加的沒用的代碼，成功！