在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结
尾的模块,webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错!
loader 加载器可以协助 webpack 打包处理特定的文件模块,比如:
less-loader 可以打包处理 .less 相关的文件
sass-loader 可以打包处理 .scss 相关的文件
url-loader 可以打包处理 css 中与 url 路径相关的文件
1.打包处理 css 文件
①运行npm i style-loader@0.23.1 css-loader@2.1.0 -D 命令,安装处理css文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中,添加loader 规则如下:
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
其中,test 表示匹配的文件类型, use 表示对应要调用的 loader
注意:
use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是:从后往前调用
2. 打包处理 less 文件
① 运行
②在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
npm i less-loader@4.1.0 less@3.9.0 -D 命令
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
3. 配置 postCSS 自动添加 css 的兼容前缀通常是兼容IE浏览器
①运行 npm i postcss-loader@3.0.0 autoprefixer@9.4.6 -D 命令
②在项目根目录中创建 postcss 的配置文件 postcss.config.js,并初始化如下配置:
const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
plugins: [ autoprefixer ] // 挂载插件
}
③ 在 webpack.config.js 的 module -> rules 数组中,修改 css 的 loader 规则如下:
module: {
rules: [
{ test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
]
}
4. 打包样式表中的图片和字体文件
①运行 npm i url-loader@1.1.2 file-loader@3.0.1 -D 命令
②在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
总结
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。