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中添加配置信息
二、less-loader
用于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的配置
三、url-loader和file-loader
用于将url导入的文件编译处理
3.1 安装
url-loader安装:npm install url-loader --save-dev
file-loader安装:npm install file-loader --save-dev
同样可在其后使用@指定具体版本
3.2 配置
配置文件中,limit限制文件大小,当文件小于该值时,会使用url-loader进行编译,会将其编译成base64字符转形式;文件大于该值时,会使用file-loader进行编译,会将其编译成使用哈希值命名的文件到目标文件夹。
四、bable-loader
4.1 安装
bable-loader和bable的安装:npm install-D babel-loader @babel/core @babel/preset-env
4.2 配置