走近webpack（2）--css打包及壓縮js

　　前面的文章介紹了webpack的devServer以及多入口多出口文件的配置，咱們繼續往下學。

　　在開始學習接下來的知識之前，我們先回顧一下，前文提到了webpack的簡單配置方法，但是只詳細說了下入口和出口文件的配置，並沒有更多的去解釋其他選項的配置，比如loader，plugin等。那么咱們現在就來學一下module的配置。前面說過，module的主要作用就是通過loaders來配置，解析，轉換不同類型的模塊。比如說，可以把less,sass轉換成css，可以把es6甚至es7語法轉換成大部分瀏覽器可以運行的js代碼。所有的loaders都需要在npm中單獨安裝並且在module中配置后才可以使用。loader的主要配置只有test和use兩種，簡單來說就是。你要匹配的文件是什么，用test來過濾。用use來確定你要用什么loader來轉換你匹配到的文件。下面咱們開始第一個loader的使用。

　　首先我們來安裝兩個loader,css-loader和style-loader。運行如下代碼：

npm install style-loader css-loader --save-dev

　　其中，style-loader主要用於將css插入到頁面的style標簽中等。css-loader主要用於處理css中的url()。

　　然后我們查看package.json中的devDependecies中多了兩個配置項，也就是我們安裝的css-loader和style-loader說明安裝成功。

　　

　　然后，我們在src文件夾下新建一個css文件夾，並且新建一個index.css文件。

　　此時，你的文件目錄結構應該是這樣的：

　　

　　在文件中我們寫上如下的代碼。

body{
   background:red; 
}
#title{
  background:orange;  
  color:blue;      
}

　　只是這樣還不行，我們需要在src/entry.js中引入這個css文件，代碼如下：

import idxcss from './css/index.css'

　　最后一步，也是最重要的一步，我們在webpack.config.js中的module中配置一下我們已經安裝好的loader：

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

　　然后，讓我們npm run build一下！打開index.html，我們發現css已經被寫入了。

　　下面我們介紹一下loader的其他幾種寫法，意思都一樣，你們喜歡哪個用哪個。

/*第一種寫法*/ 
module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }
    ]
}
/*第二種寫法*/ 
module:{
    rules:[
        {
            test:/\.css$/,
            loader:['style-loader','css-loader']
        }
    ]    
}
/*第三種寫法*/
module:{
     rules:[
        {
            test:/\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                 }
            ]
        }
    ]
}    

　　ok,下面我們來學一下如何壓縮JS，我們需要用到uglifyjs-webpack-plugin，一個壓縮JS的插件，沒錯，插件，plugins。那么看一下我們如何使用他呢。

　　uglifyjs-webpack-plugin已經集成在webpack中，所以我們不用下載安裝了，直接在config.js中引入：

const uglify = require('uglifyjs-webpack-plugin');

　　然后在module的plugin選項下new一個uglify就可以了。

　　下面我們npm run build一下就打包成功了。JS壓縮通常都是用在生產環境中的。下面來看看html文件是如何打包的。

　　先把dist目錄下的index.html復制到src目錄下，然后把dist目錄下的文件都刪除。

　　html文件的打包需要用到另一個插件，html-webpack-plugin。我們先安裝一下吧：

npm install --save-dev html-webpack-plugin

　　安裝完成之后，我們需要引入這個插件，所有的插件使用都是這三步，安裝（除了webpack集成的可以省去安裝這一步），引入，配置。

　　然后，我們需要在plugins下配置一下這個插件。代碼如下：

new htmlPlugin({
/*壓縮文件，removeAttributeQuotes指去掉屬性的雙引號，目前你隨便不用也行*/
    minify:{
        removeAttributeQuotes:true
    },
/*加入hash值，為了避免瀏覽器緩存js*/
    hash:true,
/*要打包的html文件的路徑及名稱*/
    template:'./src/index.html'
})

　　配置完成，npm run build一下會發現dist目錄下已經生成了三個文件。至此我們就學會了打包css，壓縮js和打包生成html文件。如果稍微細心一點你會發現，其實webpack主要的作用就在於loader和plugin，也正是如此，webpack才有了它多樣化個性化的配置方法。下一篇文章，我們一起學一下如何用webpack來處理圖片。