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