css-loader 对图片的处理说明 | 笔记

[sixwinds]

css-loader 对图片的处理说明 | 笔记

css-loader 对图片的处理说明（基于 webpack 1 ）

项目目录结构

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，不过开不开启和css-loader处理图片没有直接关系 -_-

2. css 中碰到url()，css-loader会把它当成一种webpack的资源去 import

3. 如果url()变成了一种资源被 import，我们就必须制定用哪种 loader 去加载，所以我们配置了url-loader 对 /\.(jpg|jpeg|gif|png)$/ 进行处理

4. url?limit=8000的意思是当遇到小于8k的图片，则url-loader会把它编译成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 不会把 css 编译后单出输出到一个文件里面，而是编译在 js 里面，当 js 执行后会在 dom 里面动态生成一个 style。如果要单出抽象出一个文件，请在 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 会把编译后的 css 输出到 output.path + 'css/bundle.css'，所以最终的编译后的目录结构为：

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 )

特别说明：
css-loader 在处理当前文件的目录结构时有问题 background-image: url(./images/small.png) 会找不到图片，请写成 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)
}