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]'
}
]
}
}
css?&modules表示开启 css module，不过开不开启和css-loader处理图片没有直接关系 -_-css 中碰到url()，css-loader会把它当成一种webpack的资源去 import
如果url()变成了一种资源被 import，我们就必须制定用哪种 loader 去加载，所以我们配置了url-loader 对
/\.(jpg|jpeg|gif|png)$/进行处理url?limit=8000的意思是当遇到小于8k的图片，则url-loader会把它编译成base64编码直接放到css中，background-image: url(./images/small.png)->background-image:url(data:image/png;base64,bxx...xxW)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到此为止 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')]
}
- 加上 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)
}
