webpack基础学习，各个loader和plugin的具体配置

znhyXYG

已于 2023-02-24 10:06:27 修改

阅读量2.4k

点赞数

文章标签： javascript webpack 开发语言学习前端

于 2023-02-23 10:38:58 首次发布

本文链接：https://blog.csdn.net/znhyXYG/article/details/129176248

版权

一、邂逅Webpack

Webpack是什么

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

二、webpack配置和css处理

webpack配置文件

1、出口、入口的配置

我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

module.exports = {
    entry: " 指定入口路径",
    output: {
        filename:"bundle.js", // 出口名字
        path: '出口路径'
    }
}

2、css-loader的使用

loader是什么

loader 可以用于对模块的源代码进行转换；
我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；
在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；

module.rules的配置如下：

test属性：用于对resource（资源）进行匹配的，通常会设置成正则表达式；
use属性：对应的值时一个数组：[UseEntry]
- UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
  - loader：必须有一个loader属性，对应的值是一个字符串；
  - options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
  - query：目前已经使用options来替代；
- 传递字符串（如：use: [ 'style-loader' ]）是loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）
loader属性：Rule.use: [ { loader } ] 的简写。

module.exports = {
    entry: " 指定入口路径",
    output: {
        filename:"bundle.js", // 出口名字
        path: '出口路径'
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                // loader:"css-loader" // 写法一
                // use:["css-loader"]   //写法二
                // 写法三
                use:[
                    {loader:"css-loader"}
                ]
            }
        ]
    }
}

3、style-loader

当我们通过css-loader来加载css文件时，代码没有生效。这是因为css-loader只是将.css文件进行解析，并不会将解析之后的css插入到页面中，而style-loader将完成插入style的操作

注意：因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将styleloader写到css-loader的前面；

        use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                ]

4、less-loader

        use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                    {loader:"less-loader"}
            ]

5、浏览器的兼容性

认识browserslist工具

Browserslist编写规则一：
- defaults：Browserslist的默认浏览器（> 0.5%, last 2 versions, Firefox ESR, not dead）。
- 5%：通过全局使用情况统计信息选择的浏览器版本。>=，<和<=工作过。
- dead：24个月内没有官方支持或更新的浏览器。现在是IE 10，IE_Mob11，BlackBerry 10，BlackBerry 7，Samsung 4和OperaMobile12.1。
- last 2 versions：每个浏览器的最后2个版本。

配置browserslist

方案一：在package.json中配置；

"browserslist": [
     "last 2 version",
     "not dead",
     "> 0.2%"
]

方案二：单独的一个配置文件.browserslistrc文件；
```
 last 2 version
 not dead
 > 0.2%
```

6、认识postCss工具

PostCSS是一个通过JavaScript来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；

如何使用

安装工具：postcss、postcss-cli

npm install postcss postcss-cli -D

插件autoprefixer

添加浏览器前缀需要安装autoprefixer

npm install autoprefixer -D

直接使用使用postcss工具，并且制定使用autoprefixer

npx postcss --use autoprefixer -o end.css ./src/css/style.css

postcss-loader

借助构建工具进行css处理

npm install postcss-loader -D

 {
  loader:"postcss-loader",
  options: {
   postcssOptions: {
    plugins: [
     require('autoprefixer')
    ]
   }
  }
 },

单独的postcss配置

在跟目录下创建postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

postcss-preset-env

在项目中配置postcss-loader时，我们一般不使用autoprefixer。而是使用另一插件postcss-preset-env

postcss-preset-env也是一个postcss的插件；
它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill；
也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）；

安装

npm install postcss-preset-env -D

使用

module.exports = {
    plugins: [
        require('postcss-preset-env')
    ]
}

三、加载和处理其他资源

1、file-loader

用来处理jpg、png等格式的图片

file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；

安装

npm install file-loader -D

配置：

        {
              test:/\.(png|jpe?g|svg|gif)$/i,
              use: {
                  loader: "file-loader"
              }  
            }

1、文件名称规则

对处理后的文件名称按照一定的规则进行显示，一般使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容：

介绍几个最常用的placeholder：

[ext]：处理文件的扩展名；
[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
[contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
[hash:<length>]：截图hash的长度，默认32个字符太长了；
[path]：文件相对于webpack配置文件的路径；

2、设置文件名称和存放路径

        {
              test:/\.(png|jpe?g|svg|gif)$/i,
              use: {
                  loader: "file-loader"
                  options: {
                    name: "img/[name].[hash:8].[ext]",
                    outputPath: "img"
                  }
              }  
            }

2、url-loader

将较小的文件转换为base64的URI

安装：

npm install url-loader -D

配置：

    {
          test:/\.(png|jpe?g|svg|gif)$/i,
          use: {
              loader: "url-loader"
              options: {
                name: "img/[name].[hash:8].[ext]",
                outputPath: "img"
              }
          }  
        }

打包之后的显示结果跟file-loader一样，但是在打包好的dist文件夹中，看不到图片文件，而是转换为base64格式存储。

limit属性

限制转换base64格式的图片大小（比如小于100kb）

    {
          test:/\.(png|jpe?g|svg|gif)$/i,
          use: {
              loader: "url-loader"
              options: {
                limit：100 * 1024，
                name: "img/[name].[hash:8].[ext]",
                outputPath: "img"
              }
          }  
        }

3、asset module type

1、介绍

webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader
webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

资源模块类型(asset module type)，通过添加4 种新的模块类型，来替换所有这些loader

asset/resource发送一个单独的文件并导出URL。之前通过使用file-loader 实现
asset/inline导出一个资源的data URI。之前通过使用url-loader 实现；
asset/source导出资源的源代码。之前通过使用raw-loader 实现；
asset在导出一个data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现；

2、使用

      {
        test: /\.(png|jpe?g|svg|gif)$/i,
        type: "asset/resource",
      },

如何自定义文件的输出路径和文件名

方式一：修改output，添加assetModuleFilename属性；

  output: {
    filename: "bundle.js", // 出口名字
    path: "出口路径",
    assetModuleFilename:"img/[name].[hash:6][ext]"
  },

方式二：在Rule中，添加一个generator属性，并且设置filename；

            {
        test: /\.(png|jpe?g|svg|gif)$/i,
        type: "asset/resource",
        generator: {
          filename: "img/[name].[hash:6][ext]",
        },
      },

url-loader中的limit限制图片大小效果

           {
        test: /\.(png|jpe?g|svg|gif)$/i,
        type: "asset",   // 注意
        generator: {
          filename: "img/[name].[hash:6][ext]",
        },
        parser: {
            dataUrlCondition: {
                maxSize: 100 *1024
            }
        }
      },

4、加载字体文件

处理特殊字体或者字体图标的使用

我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理；

           {
        test: /\.(woff2?|eot|ttf)$/,
        type: "asset/resource",
        generator: {
          filename: "img/[name].[hash:6][ext]",
        },
      },