webpack之常用loader的配置和使用
概述
loader解析器主要用于预处理项目代码,并最终转换为可打包的文件格式(js,css,标准资源文件等)
常用的几个Loader
babel-loader
安装
$ npm i babel-loader -D
配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: \'babel-loader\',
options: {
presets: [\'es2015\'] // 转换es2015风格代码
}
}],
exclude: /node_modules/
}
[
}
}
css-loader
- 参考文档
- 用于解析使用@import和url()引入的样式
安装
$ npm i css-loader -D
配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [\'style-loader\', \'css-loader\']
}
]
}
}
eslint-loader
- 参考文档
- 检查代码格式
- 使用该插件时还需要添加两个配置文件 .eslintrc.js和.babelrc(用于兼容node(eg. require())、web(eg. windows)、webpack(eg. import()...)中使用的各种语法和配置代码风格)
安装
$ npm i eslint-loader -D
配置
module.exports = {
module: {
rules: [{
test: /\.less$/,
loader: \'less-loader\' // 将 Less 编译为 CSS
}]
}
}
less-loader
- 参考文档
- 用于解析使用@import和url()引入的样式
安装
$ npm i less-loader -D
配置
module.exports = {
module: {
rules: [{
test: /\.less$/,
use: [{
loader: \'style-loader\' // creates style nodes from JS strings
}, {
loader: \'css-loader\' // translates CSS into CommonJS
}, {
loader: \'less-loader\' // compiles Less to CSS
}]
}]
}
}
file-loader
- 参考文档
- 将资源作为一个文件,生成到输出目录,不进行额外处理
安装
$ npm i file-loader -D
配置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: \'file-loader\'
},
],
},
],
}
}
备注
- 更多Loader可以查看官方文档
- 上一篇 »webpack,4--module
- 下一篇 »对webpack和gulp的理解和区别