通过npm安装需要使用的loader
在webpack.config.js中的modules关键字下进行配置
css loader
//在webpack.config.js中进行配置
module:{
rules:[
{
test:/\.css$/,
// css-loader只负责将css文件进行加载
// style-loader负责将样式添加到DOM中
// 使用多个loader时，是从右向左应用的
use:['style-loader','css-loader']
}
]
}
- less-loader
//在webpack.config.js中的rules进行配置
{
test: /\.lest$/,
use:[
{loader:'style-loader'}, //将css文件应用到DOM中
{loader:'css-loader'}, // 将css文件转换成CommonJS
{loader:'less-loader'} //将less文件转换成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的东西，都会在前面加上这个前缀。这个只要在开发时才需要，到了真正发布的时候，这个是要去除的。
},
module:{
rules:[
{
test:/\.css$/,
// css-loader只负责将css文件进行加载
// style-loader负责将样式添加到DOM中
// 使用多个loader时，是从右向左应用的
use:['style-loader','css-loader']
},
{
test: /\.lest$/,
use:[
{loader:'style-loader'}, //将css文件应用到DOM中
{loader:'css-loader'}, // 将css文件转换成CommonJS
{loader:'less-loader'} //将less文件转换成css文件
]
},
{
test:/\.(png|jpg|gif)$/,
use:[
{
loader:'url-loader',
options:{
//当加载的图片少于limit时，会将图片编译成base64字符串形式。
//当加载的图片大雨limit时，就需要使用file-loader模块进行加载。
limit:8192,
//这个选项的意思是
//file：文件要打包到的文件夹
//name：获取文件原来的名字，放在该位置
//hash8：为了防止文件名字冲突，依然使用hash，但是我们只保存8位
//ext：使用文件原来的扩展名
name:'img/[name].[hash:8].ext'
}
}
]
}
]
}
}
