webpack加载器的基本使用
1 通过 loader打包 非js模块
在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非.js 后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错!
loader加载器可以协助webpack 打包处理特定的文件模块,比如:
less-loader可以打包处理.less相关的文件
sass-loader可以打包处理.scss相关的文件
url-loader可以打包处理 css中与url路径相关的文件
2 loader的调用过程
![](https://i-blog.csdnimg.cn/blog_migrate/fb278ec495f4a4e6c9e85b26292079ab.png)
2.4 webpack 中加载器的基本使用
配置加载器来处理这些常见的文件类型
![](https://i-blog.csdnimg.cn/blog_migrate/2e686a5751ddbe68635fde68846d6fe0.png)
1 打包处理css文件
需求: 将li前面的小圆点去掉:
![](https://i-blog.csdnimg.cn/blog_migrate/01c00f7cb0ad00f168f11d9fe9080678.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5fff956db5ddf8d795af9f01efc28c54.png)
出错
![](https://i-blog.csdnimg.cn/blog_migrate/704c530d9bacdec54ff822ac154e10db.png)
ERROR in ./src/css/1.css 1:3
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> li {
| list-style: none;
| }
@ ./src/index.js 2:0-20
./src/css/1.css 1:3中的错误
模块解析失败:意外令牌(1:3)
您可能需要适当的加载程序来处理此文件类型,当前没有配置任何加载程序来处理此文件。 参见https://webpack.js.org/concepts#loaders
> li {
| 列表样式:无;
| }
@ ./src/index.js 2:0-20
在没有配置webpack的加载器就想打包除js文件之外的其他的文件,这时,控制台就会报错
1 npm i style-loader css-loader -D 命令,安装处理css文件的loader
在webpack.config.js的module -> rules 数组中,添加loader规则如下:
![](https://i-blog.csdnimg.cn/blog_migrate/9c10f236fa551425e29d33743d40eb7c.png)
// 所有第三方模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader']}
]
}
其中 test 表示匹配的文件的类型, use 表示对应要调用的 loader
脚下留心:
use数组中 指定的loader 顺序是固定的
多个 loader的调用顺序是:从后往前调用
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/8aae3255f447cd89e38c69eae659c026.png)
2 打包处理less文件
1 npm i less-loader less -D
在webpack.config.js的module->rules数组中,添加loader规则如下:
// 所有第三方模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
报错:
![](https://i-blog.csdnimg.cn/blog_migrate/dee9d4820059c8385907a63c29225271.png)
可能是less加载器的版本过高所致!没错, 就是less加载器的版本太高了!
![](https://i-blog.csdnimg.cn/blog_migrate/9c903148152f721e118898d6fc9f8c51.png)
最终效果:
![](https://i-blog.csdnimg.cn/blog_migrate/962ca0cda72d5d81d66db076a55340c6.png)
3 打包处理scss文件
解决之前的代码: 运行 npm i sass-loader node-sass-D 命令
1 npm i node-sass@4.14.1 cnpm i sass-loader@7.3.1
--save-dev【这是报错问题解决之后的代码!】
在webpack.config.js的module->rules数组中,添加1oader规则如下:
// 所有第三方模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
}
scss文件:
ul {
font-size: 60px;
li {
line-height: 60px;
}
}
报错:
可能又是版本过高的问题所致!并不是:
![](https://i-blog.csdnimg.cn/blog_migrate/aace9d6d1372049593fd0a591f47820c.png)
最终效果:
![](https://i-blog.csdnimg.cn/blog_migrate/72d07dc099f1297ef9424c6873349304.png)
4 配置postCSS 自动添加 css 兼容性前缀
1 npm i postcss-loader autoprefixer -D
2 在项目根目录中创建 postcss的配置文件postcss.config.js,并初始化如下配置:
const autoprefixer = require('autoprefixer'); // 导入自动添加前缀的插件!
module.exports = {
plugins: [ autoprefixer ] // 挂载插件
}
![](https://img2020.cnblogs.com/blog/2031306/202102/2031306-20210202153529176-251156927.png)
3 在webpack.config.js的module->rules数组中,修改css的loader规则如下:
// 所有第三方模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
}
5 打包样式表中的图片和字体文件
1 npm i url-loader file-loader -D
2 在webpack.config.js的module->rules 数组中,添加loader规则如下:
// 所有第三方模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940'}
]
}
其中?之后的是1oader的参数项。
1imit用来指定图片的大小,单位是字节(byte),只有小于1imit大小的图片,才会被转为base64图片
base64的图片加载速度更加快一些! 如何看到base64的图片格式,你把上面的limit后面的值加 1 就可以了!在浏览器里就可以看到了!【只有图片小于limit的时候才会发生转换!】
![](https://i-blog.csdnimg.cn/blog_migrate/42b7384742d0e4b830cf563f855dea29.png)
最终效果:
![](https://i-blog.csdnimg.cn/blog_migrate/30b983ac29ffa1c3273fab17f5cb5cf9.png)
6 打包处理 js 文件中的高级语法
1 安装babel转换器相关的包:npm i babel-loader @babel/core @babel/runtime -D
2 安装babel语法插件相关的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3 在项目根目录中,创建 babel配置文件babel.config.js并初始化基本配置如下:
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime', '@babel plugin-proposal-class-properties']
}
在webpack.config.js的module->rules数组中,添加1oader规则如下:
// 所有第三方模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940' },
//exclude 为排除项,表示 babe1-loader不需要处理node modules中的js文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node-modules/}
]
}
``
报错:
```js
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel plugin-proposal-class-properties/babel-plugin'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at resolve (internal/modules/cjs/helpers.js:30:19)
at resolveStandardizedName (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\files\plugins.js:100:7)
at resolvePlugin (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\files\plugins.js:44:10)
at loadPlugin (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\files\plugins.js:52:20)
at createDescriptor (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
at items.map (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
at createPluginDescriptors (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\config-descriptors.js:105:10)
ERROR in (webpack)-dev-server/client?http://127.0.0.1:8034
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel plugin-proposal-class-properties/babel-plugin'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at resolve (internal/modules/cjs/helpers.js:30:19)
at resolveStandardizedName (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\files\plugins.js:100:7)
at resolvePlugin (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\files\plugins.js:44:10)
at loadPlugin (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\files\plugins.js:52:20)
at createDescriptor (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
at items.map (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
at createPluginDescriptors (F:\lvhang\working\Internship-week-2\node_modules\@babel\core\lib\config\config-descriptors.js:105:10)
@ multi (webpack)-dev-server/client?http://127.0.0.1:8034 ./src/index.js main[0]
报错的原因其实已经说的很明白了!就是没有找到@babel plugin-proposal-class-properties这个模块嘛!我开始还以为是模块下载错误或者版本太高的原因。后来发现是webpack.config.js里的配置文件错了!少加了斜杠!看图!
![](https://i-blog.csdnimg.cn/blog_migrate/0c03f583edb686826f5a8a3ab10b7c2a.png)
但是新的问题又出现了:
样式不生效了!控制台出现警告:
WARNING in ./src/index.js 7:0-1
"export 'default' (imported as '$') was not found in 'jquery'
WARNING in ./src/index.js 8:2-3
"export 'default' (imported as '$') was not found in 'jquery'
WARNING in ./src/index.js 9:2-3
"export 'default' (imported as '$') was not found in 'jquery'
WARNING in ./src/index.js 10:2-3
"export 'default' (imported as '$') was not found in 'jquery'
出现上面的问题也是由于我太粗心了!
![](https://i-blog.csdnimg.cn/blog_migrate/8c3e11d903e832d675ba21fe78265dd2.png)
最终效果:
![](https://i-blog.csdnimg.cn/blog_migrate/4355e0757e53825f623b9b9ae721827e.png)