二、webpack的loader配置

webpack打包的时候只认识.js文件，但我们开发中肯定不仅仅只是js文件，如.html、.css、.jpg等，webpack提供了很多loader来打包不同类型的文件。

1. css-loader

对于加载css文件来说，我们需要一个可以读取css文件的loader，这个loader最常用的是css-loader。

1.1 安装

yarn add css-loader -D

1.2 使用

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件结尾

        // 第一种写法
        use: [
          {
            loader: 'css-loader',
          }
        ],

        // 第二种写法
        loader: 'css-loader',

        //第三种写法
        use: ['css-loader']

        // 第二种和第三种写法最终都会被转成第一种写法
      }
    ]
  }
}

2. style-loader

css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中，如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader。

2.1安装

yarn add style-loader -D

2.2 使用

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件结尾
        use: ['style-loader','css-loader']
      }
    ]
  }
}

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

---

其实style-loader做的事情很简单，就是在动态创建了一个style标签，把css-loader处理的css内容放到style标签内，然后在插入到页面的head标签内。

image.png

3. less文件处理

3.1 使用less工具来完成文件的编译转换

安装less工具将less文件转为css文件。

yarn add less -D

3.2 less-loader处理

使用less-loader，来自动使用less工具转换less到css
安装

yarn add less-loader -D

使用

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader','css-loader', 'less-loader']
      }
    ]
  }
}

4. 浏览器兼容性

在这里可以查询浏览器的占有率。

4.1 认识browserslist工具

Browserslist是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize
• obsolete-webpack-plugin

4.1.1 命令行使用browserslist

npx browserslist ">1%, last 2 version, not dead"

4.1.2 配置browserslist

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

{

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

方案二：在根目录新建.browserslistrc文件

last 2 version
not dead
> 0.2%

方案一和方案二配置的条件都是or关系， 如果要同时满足条件用and

5 PostCSS工具

PostCSS是一个通过JavaScript来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置，但是实现这些工具，我们需要借助于PostCSS对应的插件。

5.1 命令行使用postcss

yarn add postcss postcss-cli -D

可以在这里查询到css样式添加规则。
因为我们需要添加前缀，所以要安装autoprefixer：

yarn add autoprefixer -D

命令行直接使用使用postcss工具，并且制定使用autoprefixer：

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

5.2 postcss-loader

在webpack中使用postcss就是使用postcss-loader来处理的。
安装

 yarn add postcss-loader -D

配置
第一种方案：
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件结尾
        use: ['style-loader','css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('autoprefixer')
              ]
            }
          }
        }]
      }
    ]
  }
}

第二种：
也可以将plugin封装出来，在根目录新建postcss.config.js文件：

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

webpack.config.js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件结尾
        use: ['style-loader','css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader','css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  }
}

5.3 postcss-preset-env

事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixe，我们可以使用另外一个插件：postcss-preset-env。
postcss-preset-env也是一个postcss的插件，它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill，也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）。
安装：

 yarn add postcss-preset-env -D

使用
将autoprefixer替换成postcss-preset-env就行了：

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

有些插件直接写字符串就行，会自动requre：

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

5.4 css @import问题

问题复现：
假如main.js里面引入了src/index.css，而src/index.css里使用@import引入了src/test.css，就会出现src/test.css文件里的样式不会被postcss所处理，这时候就需要配置：
webpack.config.js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件结尾
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 1 //后面有几个插件就填写几
          }
        }, 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 2 //后面有几个插件就填写几
          }
        }, 'postcss-loader', 'less-loader']
      }
    ]
  }
}

6 其他资源处理

要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader

6.1 file-loader

安装

yarn add file-loader -D

配置
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        use: 'file-loader'
      }
    ]
  }
}

图片资源加载方式：

1. require('xxx').default
2. import imgSource from 'xxx.png'

有时候我们处理后的文件名称按照一定的规则进行显示，比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等。这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容。
介绍几个最常用的placeholder：

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

自定义图片打包名字和输出路径：
webpack.config.js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash:6].[ext]',
            outputPath: 'images'
          }
        }
      }
    ]
  }
}

6.2 url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。
安装

yarn add url-loader -D

配置
和file-loader用法很相似

const path = require('path')
module.exports = {
 module: {
   rules: [
     {
       test: /\.(png|jpe?g|gif|svg)/,
       use: {
         loader: 'url-loader',
         options: {
           name: '[name]-[hash:6].[ext]',
           outputPath: 'images',
           limit: 100 * 1024 // byte, 只有小于100kb的才会转成base64
         }
       }
     }
   ]
 }
}

7 用资源模块类型（asset module type）

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader，在webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader。
注意： asset module type打包的图片资源如果用require不需要.detault

7.1 asset/resource

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        type: 'asset/resource'
      }
    ]
  }
}

自定义输出文件和文件名
webpack5的[ext]已经包含了.
第一种写法：
这种写法包含所有的assetModule的定义，不推荐。
webpack.config.js

module.exports = {
  output: {
    assetModuleFilename: 'img/[name]-[hash:6][ext]'
  }
}

第二种写法：
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name]-[hash:6][ext]'
        }
      }
    ]
  }
}

7.2 asset/inline

asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        type: 'asset/inline',
      }
    ]
  }
}

7.3 asset

asset可以实现url-loader的limit效果。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        type: 'asset',
        generator: {
          filename: 'images/[name]-[hash:6][ext]'
        },
        parser: {
          dataUrlCondition: {
            maxSize: 20 * 1024 //byte
          }
        }
      }
    ]
  }
}

8 加载字体文件

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff2?|eot|ttf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'font/[name]-[hash:6][ext]'
        },
      }
    ]
  }
}