webpack的loaders是一大特色,也是很重要的一部分。这遍博客我将分类讲解一些常用的loader
一、loaders之 预处理
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
栗子:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'less-loader'
]
}
]
}
}
二、loaders之js处理
babel-loader
npm install --save-dev babel-core babel-preset-env babel-loader
栗子
新建一个名字为.babelrc的文件
{
"presets": ["env"]
}
新建一个名字为webpack.config.js文件
module: {
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:['env']
}
},
//exclude: /node_modules/,
exclude:path.resolve(__dirname,'node_module'),
// include:__dirname+'/src/',
include:path.resolve(__dirname,'src'),
}
]
}
三、loaders之json处理
json-loader
npm install --save-dev json-loader
module.exports = {
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader'
}
]
}
}
四、loaders之html处理
html-loader
npm i -D html-loader
test:/\.html$/,
use:'html-loader'