1. 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块,
webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错!
2. loader 加载器的作用:协助 webpack 打包处理特定的文件模块。比如:
css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
1. 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令,安装处理 css 文件的 loader
2. 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
其中,test 表示匹配的文件类型, use 表示对应要调用的 loader
注意:
⚫ use 数组中指定的 loader 顺序是固定的
⚫ 多个 loader 的调用顺序是:从后往前调用
module: { //所有第三方文件模块的匹配规则
rules: [ //文件名后缀的匹配规则
// 定义了不同模块对应的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
1. webpack默认只能打包处理.js结尾的文件,处理不了其他后缀的文件
2. 由于代码中包含css文件,因此webpack处理不了
3. 当webpack发现某个文件处理不了的时候,会查找webpack.config.js这个配置文件
看module.rules数组中是否配置了对应的loader加载器
4. webpack把index.css这个文件,先转交给最后一个loader进行处理(css-loader)
5. 当css-loader处理完毕之后,会把处理结果转交给下一个loader(style-loader)
6. 当style-loader处理完毕之后,如果没有下一个loader,就把处理结果转交给webpack
7. webpack把处理结果合并到/dist/main.js中,最终生成打包好的文件
① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
module: { //所有第三方文件模块的匹配规则
rules: [ //文件名后缀的匹配规则
// 定义了不同模块对应的loader
// 处理.css文件的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理.less文件的loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
其中 ? 之后的是 loader 的参数项:
limit 用来指定图片的大小,单位是字节(byte)
只有 ≤ limit 大小的图片,才会被转为 base64 格式的图片
在webpack.config.js中配置:
module: { //所有第三方文件模块的匹配规则
rules: [ //文件名后缀的匹配规则
// 定义了不同模块对应的loader
// 处理.css文件的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理.less文件的loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件的loader
{ test: /\.jpg|png|gif$/, use: 'url-loader' }
]
}
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理
// 定义一个装饰器函数
function info(target) {
// 为目标添加静态属性
target.info = 'Person info';
}
// 定义一个类
@info
class Person { }
安装:
运行如下的命令安装对应的依赖包:
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
在webpack.config.js中配置:
module: { //所有第三方文件模块的匹配规则
rules: [ //文件名后缀的匹配规则
// 定义了不同模块对应的loader
// 处理.css文件的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理.less文件的loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件的loader
{ test: /\.jpg|png|gif$/, use: 'url-loader' },
// 使用babel-loader处理高级的js语法 node_modulesd目录下的第三方包不需要被打包
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modulesd/ }
]
}
配置babel-loader
在项目根目录下,创建名为 babel.config.js 的配置文件,定义 Babel 的配置项如下:
module.exports = {
// 声明babel可用的插件
// 将来webpack调用babel-loader的时候,会先加载plugins插件来使用
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}