通過npm安裝需要使用的loader
在webpack.config.js中的modules關(guān)鍵字下進行配置
css loader
//在webpack.config.js中進行配置
module:{
rules:[
{
test:/\.css$/,
// css-loader只負責(zé)將css文件進行加載
// style-loader負責(zé)將樣式添加到DOM中
// 使用多個loader時，是從右向左應(yīng)用的
use:['style-loader','css-loader']
}
]
}
- less-loader
//在webpack.config.js中的rules進行配置
{
test: /\.lest$/,
use:[
{loader:'style-loader'}, //將css文件應(yīng)用到DOM中
{loader:'css-loader'}, // 將css文件轉(zhuǎn)換成CommonJS
{loader:'less-loader'} //將less文件轉(zhuǎn)換成css文件
]
}
- img-loader
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:'url-loader',
options:{
limit:8192
}
}
]
}
- url-loader
//webpack.config.js
const path = require('path')
module.exports = {
entry:'.src/main.js',
output:{
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
publicPath:'dist/' //以后涉及到任何URL的東西，都會在前面加上這個前綴重虑。這個只要在開發(fā)時才需要单芜，到了真正發(fā)布的時候，這個是要去除的吞获。
},
module:{
rules:[
{
test:/\.css$/,
// css-loader只負責(zé)將css文件進行加載
// style-loader負責(zé)將樣式添加到DOM中
// 使用多個loader時谜酒，是從右向左應(yīng)用的
use:['style-loader','css-loader']
},
{
test: /\.lest$/,
use:[
{loader:'style-loader'}, //將css文件應(yīng)用到DOM中
{loader:'css-loader'}, // 將css文件轉(zhuǎn)換成CommonJS
{loader:'less-loader'} //將less文件轉(zhuǎn)換成css文件
]
},
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:'url-loader',
options:{
//當(dāng)加載的圖片少于limit時，會將圖片編譯成base64字符串形式舞肆。
//當(dāng)加載的圖片大雨limit時，就需要使用file-loader模塊進行加載博杖。
limit:8192,
//這個選項的意思是
//file：文件要打包到的文件夾
//name：獲取文件原來的名字椿胯，放在該位置
//hash8：為了防止文件名字沖突，依然使用hash剃根，但是我們只保存8位
//ext：使用文件原來的擴展名
name:'img/[name].[hash:8].ext'
}
}
]
}
]
}
}
