webpack 之loader 常用总结
1、介绍
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。
2、css-loader 和 style-loader
当我们在直接在JavaScript 模块中 import CSS文件的时候，webpack会提示报错。找不到XX模块。
安装
npm i css-loader style-loader -D
webpack.config.js配置则增加
module: {
rules: [
//配置css文件打包。
//注意loader引入顺序，是从右向左引入然后解析的。
//如：css-loader先打包css文件，然后style-loader作用是把css文件引入到html里面
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
]
}
3、less-loader和sass-loader
通常都会采用less或者sass这样的预处理器,能够加快开发效率
安装
npm i less less-loader -D
npm i node-sass sass-loader -D
配置：less-loader先处理less文件，然后交给css-loader，style-loader顺序处理。
module: {
rules: [
//配置css文件打包。
//注意loader引入顺序，是从右向左引入然后解析的。
//如：css-loader先打包css文件，然后style-loader作用是把css文件引入到html里面
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader' ,'less-loader'] },
// 或sass
// { test: /\.scss$/, use: ['style-loader', 'css-loader' ,'sass-loader'] },
]
}
4、file-loader和url-loader
我们在项目中肯定需要打包一些图片资源，当然还有一些字体图标资源。这个时候我们就需要安装file-loader和url-loader了。
其中，url-loader是依赖file-loader的。
如：
body{
div{
color: red;
background-image: url('../images/logo.png')
}
}
npm i file-loader url-loader -D
增加
{ test: /\.(png|jpeg|jpg|gif)$/, use: ['url-loader'] },
则
打包出来的图片变成了base64格式。
我们继续补充webpack.config.js 有关loader配置内容：
{
test: /\.(png|jpg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
//配置的name项。指的是打包图片资源到指定的images目录下。
//配置的limit项。指的是当图片资源大于5kb的时候，就不用转为base64格式了
name: './images/[name].[ext]',
limit: 5 * 1024
}
}],
},
当我们执行 npm run build。
我们就可以在dist目录下看到，我们打包后的图片资源
当然，为了避免图片重名的情况，我们可以给文件名称加上哈希值。
[hash:4]指的是加上四位的hash值。你们可以随意加。
name: './images/[name][hash:4].[ext]',
如
backgroundImgfrfr.png
4、ts-loader、babel-loader、eslint-loader、vue-loader等
5、Babel
babel 是一个javascript编辑器。可以看下bable官网介绍：https://www.babeljs.cn/。
我们如今在项目中往往都会使用ES6语法，如：箭头函数，class声明等等，但是低版本的浏览器并不兼容。我们使用webpack打包的时候，webpack也不能帮助我们直接做兼容转化，此时，我们就需要安装Babel-loader，帮助我们。
开始安装：bable-loader ; babel-core(babel核心包)；babel-preset-env(babel预设)；
npm install babel-loader babel-core babel-preset-env
安装完毕后，我们开始配置；推荐配置是，首先我们在项目中新建一个.babelrc文件。文件里面的内容是一个Json对象。
-
{
-
"presets": ["@babel/preset-env"]
}
然后我们在webpack.config.js里面配置使用的loader；
{
test: /\.js$/,
use: ['babel-loader'],
//exclude:不需要对node_modules目录下的文件进行处理。
exclude: /(node_modules)/,
}
（vue等通过 cli搭建项目后，均已配置完成）
当我们执行，npm run build后，查看原来编写的js文件的时候，我们就会发现。箭头函数等高级语法写的语句，就已经改变成具有兼容性的写法了。
6、@babel/polyfill
Babel包含一个polyfill，您可以使用新的内置函数，如Promise或WeakMap，静态方法，如Array.from或Object。赋值，实例方法，比如Array.prototype。包含和生成器函数(如果使用regenerator插件)。为了做到这一点，polyfill添加了全局范围和原生原型，比如String。
比如新的语法
var str = '123'
str.includes('2');
想includes这样新的方法，webpack也不能直接帮我们做兼容性语法处理的。
此时我们就需要安装：
npm install --save @babel/polyfill
然后进行引入就可以了。
引入的方法有几种:
例如：
module.exports = {
entry: ["@babel/polyfill", "./src/main.js"],
};
参考
https://blog.csdn.net/qq_29557739/article/details/92972544
https://blog.csdn.net/qq_29557739/article/details/93461411
https://blog.csdn.net/qq_29557739/article/details/96430467?spm=1001.2014.3001.5501
