在实际开发过程中,webpack
默认只能打包处理以 .js
后缀结尾的模块。
其他的非 .js
后缀名结尾的模块 webpack
默认处理不了,需要调用 loader
加载器才可以正常打包,否则会报错!
loader
加载器的作用:协助 webpack
打包处理特定的文件模块。
css-loader
可以打包处理 .css
相关文件
less-loader
可以打包处理 .less
相关文件
babel-loader
可以打包处理 webpack 无法处理的高级 js 语法
步骤:
1)运行 npm install [email protected] [email protected] -D
命令,安装处理 css
文件的 loader
2)在 webpack.config.js
的 module -> rules
数组中,添加 loader
规则如下:
module:{ // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
其中,test
表示匹配的文件类型
,use
表示对应要调用的 loader
注意:
use
数组中指定的loader
顺序是固定的多个
loader
的调用顺序是:从后往前调用
步骤:
1)运行 npm install [email protected] [email protected] -D
命令
2)在 webpack.config.js
的 module -> rules
数组中,添加 loader
规则如下:
module:{ // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
步骤:
1)运行 npm install [email protected] [email protected] -D
命令
2)在 webpack.config.js
的 module -> rules
数组中,添加 loader
规则如下:
module:{ // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{
test:/\.jpg|png|gif$/,
use:['url-loader?limit=22229']
}
]
}
其中 ?
之后的是 loader
的参数项:
limit
用来指定图片的大小
,单位是字节(byte
)
只有 <=
limit 大小的图片,才会被转为 base64 格式
的图片
webpack 只能打包处理 一部分高级的 JavaScript 语法。
对于那些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理。
例如 webpack 无法处理下面的 JavaScript 代码:
// 定义了名为 info 的装饰器
function info(target){
// 为目标添加静态属性 info
target.info = 'Person info.'
}
// 为 Person 类应用 info 装饰器
@info
class Person{}
// 打印 Person 的静态属性info
console.log(Person.info)
步骤:
1)运行 npm install [email protected] @babel/[email protected] @babel/[email protected] -D
命令
2)在 webpack.config.js
的 module -> rules
数组中,添加 loader
规则如下:
module:{ // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{
test:/\.js$/,
use:'babel-loader',
exclude:/node_modules/
}
]
}
3)在项目根目录下,创建名为 babel.config.js
的配置文件,定义 Babel
的配置项如下:
module.exports = {
// 声明 babel 可用的插件
plugins:[
[
'@babel/plugin-proposal-decorators',
{
legacy: true
}
]
]
}
Babel官网:https://babeljs.io/dosc
一 叶 知 秋,奥 妙 玄 心