走近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來處理圖片。