2.webpack loader

webpack默认只能处理 以 .js 为后缀名的文件，其他的文件需要用loader，比如

• css-loader 可以打包处理.css相关的文件
• less-loader 可以打包处理 .less相关的文件
• babel-loader 可以打包处理webpack无法处理的高级JS语法

目录

1  css-loader

1.1  安装

1.2  配置

1.3  使用

2  less-loader

2.1  安装

2.2  配置

2.3  使用

3  url-loader

3.1  安装

3.2  配置

3.3  使用

4  babel-loader

4.1  安装

4.2  配置

4.3  使用

---

1  css-loader

1.1  安装

1.2  配置

前面的test是正则，意思是以 .css 结尾，整体的意思是如果以 .css结尾，就先用css-loader，再用style-loader

• use数组中指定的loader顺序是固定的，不能先写css-loader再写style-loader
• use中多个loader调用顺序是从后向前调用，css-loader处理完之后会交给style-loader处理
• 等style-loader处理完之后会将处理结果转交给webpack，然后webpack把处理结果合并到打包文件中

1.3  使用

先搞一个css，把li的点去掉

然后在index.js中引入

之后重启webpack-server

发现达到了效果

2  less-loader

2.1  安装

下面的less我一开始没有装，只装了less-loader也可以使用

2.2  配置

2.3  使用

搞一个index1.less

JS中引入

重启服务后发现less生效

3  url-loader

url-loader是处理图片的

3.1  安装

3.2  配置

limit的单位是字节(byte)，在这里的意思是，只有小于22229字节的图片才会被转换为base64格式的图片

可以不写limit

如果大于22229字节的图片，那么就会转换为地址(图片路径)

• base64不需要进行额外的请求，但体积大(大约比图片路径形式大30%)，图片路径需要进行额外的请求，但体积小

也可以用这种方式配置url-loader,具体的使用方法在 1.webpack的基本使用 1.webpack的基本使用_Suyuoa的博客-CSDN博客 中有提到

3.3  使用

先搞一张图片放在src/images中

然后在index.html中搞一个img

之后在index.js中导入图片，并将其设置给img的src

重新启动服务后发现可以加载图片文件

4  babel-loader

babel-loader用于处理更高级的JS语法，比如装饰器(@)，类(class)

4.1  安装

4.2  配置

在webpack.config.js中加入如下配置，意思是以js结尾的文件交给babel-loader来处理，除了node_modules中的js文件

之后在项目根目录下新建文件，命名为babel.config.js，然后写入下面内容

• babel-loader是webpack的插件，@babel/plugin-proposal-decorators是babel-loader的插件

legacy字面意思是遗产的意思，他的可选值是布尔值，如果legacy为true，那么表示可以支持古老的语法(这里就是古老的装饰器语法)，如果为false就是不支持

4.3  使用

在index.js中加入类和装饰器

这里代码的意思是先使用function定义一个装饰器info，info的参数target是要给谁的意思，带上这个装饰器的类会被添加一个属性info

之后创建一个空的类，名为Person，给Person加上装饰器，加上装饰器的Person会有info这个属性，最后我们打印出这个属性

这里的红波浪线并不是说写错了，而是说不建议这样写，你可以根据提示消除这个warning

将其勾选上，这个warning就没有了

 重新开启服务后，发现类与装饰器语法生效