webpack基础（三）——部分loader的使用及相关配置文件

webpack默认只会打包js文件，但在实际项目中，还会涉及多种文件和情况，为了使webpack能实现这些功能，需要手动添加loader来实现那些功能

一、css-loader和style-loader

css-loader可以实现解析.css文件中的代码，但解析后需要我们手动将代码内容挂载到<style>标签中

style-loader则可以将.css文件解析后的代码自动挂载到<style>标签中去

1.1 安装

可在webpack官网查询所有loader：webpack官网

css-loader安装：npm install --save-dev css-loader

style-loader安装：npm install --save-dev style-loader

可在其后使用@指定具体版本

1.2配置

在webpack.config.js中添加配置信息

webpack.config.js

用于webpack将.less解析为.css,由于less-loader其自身并没有解析功能，所以需要安装less

2.1 安装

less-loader和less的安装：npm install less less-loader --save-dev

同样可在其后使用@指定具体版本

2.2 配置

在webpack.config.js文件中添加less-loader的配置

webpack.config.js

用于将url导入的文件编译处理

3.1 安装

url-loader安装：npm install url-loader --save-dev

file-loader安装：npm install file-loader --save-dev

同样可在其后使用@指定具体版本

3.2 配置

wabpack.config.js

配置文件中，limit限制文件大小，当文件小于该值时，会使用url-loader进行编译，会将其编译成base64字符转形式；文件大于该值时，会使用file-loader进行编译，会将其编译成使用哈希值命名的文件到目标文件夹。

webpack打包后大于limit的文件

4.1 安装

bable-loader和bable的安装：npm install-D babel-loader @babel/core @babel/preset-env

4.2 配置

webpack.config.js