css-loader 對(duì)圖片的處理說明（基于 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]'
}
]
}
}
css?&modules表示開啟 css module，不過開不開啟和css-loader處理圖片沒有直接關(guān)系 -_-css 中碰到url()，css-loader會(huì)把它當(dāng)成一種webpack的資源去 import
如果url()變成了一種資源被 import，我們就必須制定用哪種 loader 去加載，所以我們配置了url-loader 對(duì)
/\.(jpg|jpeg|gif|png)$/進(jìn)行處理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)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 不會(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')]
}
- 加上 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 )
特別說明：
css-loader 在處理當(dāng)前文件的目錄結(jié)構(gòu)時(shí)有問題 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)
}
