(5/24) 模塊化：實現快速CSS文件打包

寫在前面：爲了兼容，此處的webpack版本爲3.6.0、webpack-dev-server版本爲2.9.七、css-loader版本爲2.0.0、style-loader版本爲0.23.1，若在下列安裝後運行出錯，通常是版本問題，能夠安裝此處的指定版原本解決。

1.前言

webpack把多個文件打包到一個js裏，能夠減小http的請求數。要完成CSS打包之，須要完成對webpack.config.js文件裏的Loaders配置項進行鍼對性的配置。

1.1 Loaders

Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的緣由。經過使用不一樣的Loader，Webpack能夠對不一樣的文件格式進行特定處理。

Loaders使用例子：

（1）分析JSON文件並把它轉換爲JavaScript文件；

（2）以把ES6或者ES7的代碼，轉換成大多瀏覽器兼容的JS代碼；

（3）對React的開發而言，合適的Loaders能夠把React的JSX文件轉換爲JS文件。

（4）能夠把SASS文件的寫法轉換成CSS，而不在使用其餘轉換工具等。

注意：全部的Loaders都須要在npm中單獨進行安裝，並在webpack.config.js裏進行配置，Loaders的配置項包括有：

 認識了Loaders相關信息以後，咱們開始考慮如何打包CSS文件。

2.打包css文件

 

 

 2.1 創建index.css文件

要打包css，首先得有個css文件，在/src目錄下，咱們創建一個css文件夾，在文件夾裏創建index.css文件。代碼內容以下。

src/css/index.css：

body{
    background-color: #018eea;
    color: red;
    font-size: 32px;
    text-align: center;
}

css文件創建完成後，將其引入到入口文件中，才能實現打包，此節中咱們把它引入到entry.js中，在src目錄下的entry.js文件首行加入如下代碼：

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

當css引入完成後，咱們就能夠開始使用loader來解析css文件了，此處的解析須要兩個loader分別是style-loader和css-loader。

2.2 style-loader安裝

 style-loader是用來處理css文件中的url()，style-loader在npm中網址

採用npm install進行項目安裝（若失敗，採用cnpm安裝）

npm install style-loader --save-dev

--save-dev：表示將模塊安裝到項目目錄下，並在package文件的devDependencies節點寫入依賴。

2.3 css-loader安裝

css-loader是用來將css插入到頁面的style標籤，css-loader在npm中網址

採用npm install進行項目安裝（若失敗，採用cnpm安裝），npm install 會默認安裝最新的版本。

npm  install --save-dev css-loader

 

兩個loader都下載安裝好後，咱們就能夠在webpack.config.js文件裏進行loaders配置工做了。

2.4 loaders配置

修改webpack.config.js中module屬性中的配置代碼以下：

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

loader的三種寫法：

第一種寫法：直接用use。

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

第二種寫法：把use換成loader。

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

第三種寫法：用use+loader的寫法：

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

 

 2.5 啓動服務

在終端裏輸入 npm run server 打開服務器，訪問咱們上節配置的本地服務端口（localhost:1818），能夠看到效果。

效果爲：

 

附錄此時項目目錄結構：