css-loader 對(duì)圖片的處理說(shuō)明（基于 webpack 1 ）

項(xiàng)目目錄結(jié)構(gòu)

proj
 ｜ 
 ｜ --- webpack.config.js
 ｜
 ｜ --- dist
 ｜
 ｜ --- src
         ｜
         ｜ --- index.js
         ｜ --- index.css/index.less
         ｜ --- images
                  ｜
                  ｜ --- small.png ( < 8k )
                  ｜ --- big.png ( > 8k )

css/less 文件

.big-pic {
  background-image: url(./images/big.png)
}
.small-pic {
  background-image: url(./images/small.png)
}

webpack 配置文件(webpack.config.js)

module.exports = {
  entry: './src/index.js'
  output: {
    path: './dist',
    filename: 'js/bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.(less|css)$/,
        loader: [
          'style',
          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'less'
        ].join('!')
      },
      {
        test: /\.(jpg|jpeg|gif|png)$/,
        loader: 'url?limit=8000&name=imgs/[name].[ext]'
      }
    ]
  }
}

1. css?&modules 表示開啟 css module，不過(guò)開不開啟和css-loader處理圖片沒(méi)有直接關(guān)系 -_-

2. css 中碰到url()，css-loader會(huì)把它當(dāng)成一種webpack的資源去 import

3. 如果url()變成了一種資源被 import，我們就必須制定用哪種 loader 去加載，所以我們配置了url-loader 對(duì) /\.(jpg|jpeg|gif|png)$/ 進(jìn)行處理

4. url?limit=8000的意思是當(dāng)遇到小于8k的圖片，則url-loader會(huì)把它編譯成base64編碼直接放到css中， background-image: url(./images/small.png) -> background-image:url(data:image/png;base64,bxx...xxW)

5. url?name=imgs/[name].[ext]的意思是把 url(./images/big.png) -> url(imgs/big.png) 并把圖片拷貝到 output.path + name的地方(這里name指的是 url?name=xxx 的 name)。即從 /src/images/big.png -> /dist/imgs/big.png

6. 到此為止 webpack 不會(huì)把 css 編譯后單出輸出到一個(gè)文件里面，而是編譯在 js 里面，當(dāng) js 執(zhí)行后會(huì)在 dom 里面動(dòng)態(tài)生成一個(gè) style。如果要單出抽象出一個(gè)文件，請(qǐng)?jiān)?webpack 里面加上插件 ExtractTextPlugin

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/index.js'
  output: {
    path: './dist',
    filename: 'js/bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.(less|css)$/,
        loader: ExtractTextPlugin.extract( [
          'style',
          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'less'
        ].join('!') )
      },
      {
        test: /\.(jpg|jpeg|gif|png)$/,
        loader: 'url?limit=8000&name=imgs/[name].[ext]'
      }
    ]
  },
  plugins:[ new ExtractTextPlugin('css/bundle.css')]
}

8. 加上 ExtractTextPlugin，看plugins:[ new ExtractTextPlugin('css/bundle.css')] webpack 會(huì)把編譯后的 css 輸出到 output.path + 'css/bundle.css'，所以最終的編譯后的目錄結(jié)構(gòu)為：

proj
 ｜ 
 ｜ --- webpack.config.js
 ｜
 ｜ --- dist
 ｜      ｜
 ｜      ｜ --- js
 ｜      ｜      ｜ --- bundle.js
 ｜      ｜ --- css
 ｜      ｜      ｜ --- bundle.css
 ｜      ｜ --- imgs
 ｜              ｜ --- big.png
 ｜
 ｜ --- src
         ｜
         ｜ --- index.js
         ｜ --- index.css/index.less
         ｜ --- images
                  ｜
                  ｜ --- small.png ( < 8k )
                  ｜ --- big.png ( > 8k )

特別說(shuō)明：
css-loader 在處理當(dāng)前文件的目錄結(jié)構(gòu)時(shí)有問(wèn)題 background-image: url(./images/small.png) 會(huì)找不到圖片，請(qǐng)寫成 background-image: url(../src/images/small.png)，即先回到上層目錄再往下引用。所以最終 css 寫成：

.big-pic {
  background-image: url(../src/images/big.png)
}
.small-pic {
  background-image: url(../src/images/small.png)
}