常用 loader

babel-loader

用于将 ES6 转换为 ES5

安装

npm install @babel/core @babel/preset-env babel-loader -D

配置

module: {
  rules: [
    {
      test: /\.js$/,
      include: [resolve('src'), resolve('test')],
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'], //对应babel-preset-env
        },
      },
    },
  ]
}

{
  //package.json文件，babel-core和babel-loader是核心插件，babel-preset-env处理代码的预设
  "devDependencies": {
    "babel-core": "^6.26.0", // 核心包
    "babel-loader": "^7.1.2", // 基础包
    "babel-preset-env": "^1.6.1", // 根据配置转换成浏览器支持的 es5
    "babel-plugin-transform-runtime": "^6.23.0",
    //polyfill作用：es6新语法引入，promise、Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol
    "babel-preset-react": "^6.24.1", //react语法的转换
    "babel-plugin-import": "^1.6.3", // import的转换
    "babel-preset-stage-0": "^6.24.1" //babel-preset-stage-0 打包处于 strawman 阶段的语法）
  }
}

• 配置文件.babelrc

增加了.babelrc 文件后，options 项即可省略，在执行 babel-loader 的时候默认会去读.babelrc 中的配置，webpack 和 babel.rc 文 件里的配置都会生效，比如 transform-remove-console 插件在任意一处配置，都会生效。在.babelrc 配置文件中，主要是对预设 （presets）和插件（plugins）进行配置。

style-loader

style-loader 用于将 CSS 插入到 DOM 中，通过使用多个 <style></style> 自动把 styles 插入到 DOM 中.

css-loader

css-loader 对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样，让 CSS 也能模块化开发。

安装

npm install --save-dev style-loader css-loader

配置

const paths = require('./paths')
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: paths.appSrc,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
        ],
      },
    ],
  },
}

sass-loader

sass-loader 加载 Sass/SCSS 文件并将他们编译为 CSS。

npm install --save-dev sass-loader sass

less-loader

less-loader 加载 less 文件并将他们编译为 CSS。

npm install --save-dev less-loader less

postcss-loader

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。

• 可以自动为 CSS 规则添加前缀；
• 将最新的 CSS 语法转换成大多数浏览器都能理解的语法；
• css-modules 解决全局命名冲突问题。

postcss-loader 使用 PostCSS 处理 CSS 的 loader。

npm install --save-dev postcss-loader postcss postcss-preset-env

配置

const paths = require('./paths')
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.(scss|sass)$/,
        include: paths.appSrc,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          {
            loader: 'css-loader',
            options: {
              // Enable CSS Modules features
              modules: true,
              importLoaders: 2,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
            },
          },
          // 将 PostCSS 编译成 CSS
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    // postcss-preset-env 包含 autoprefixer
                    'postcss-preset-env',
                  ],
                ],
              },
            },
          },
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      {
        test: /\.less$/i,
        use: [
          'style-loaderr',
          {
            loader: 'css-loader',
            options: { importLoaders: 2 },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    // postcss-preset-env 包含 autoprefixer
                    'postcss-preset-env',
                  ],
                ],
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
                math: 'always',
              },
            },
          },
        ].filter(Boolean),
      },
    ],
  },
}

• postcss.config.js

增加了postcss.config.js 文件后，options 项即可省略

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

asset module

在 webpack 5 之前，通常使用

• raw-loader 将文件导入为字符串
• url-loader 将文件作为 data URI 内联到 bundle 中
• file-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，并且配置资源体积限制实现。

const paths = require('./paths')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: isEnvProduction ? utils.assetsPath('img/[name].[hash:8][ext]') : '[name].[hash:8][ext]',
        },
        parser: {
          dataUrlCondition: {
            maxSize: isEnvProduction ? 4096 : 0,
          },
        },
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        include: [resolveApp('src')],
        type: 'asset/resource',
      },
    ],
  },
}

thread-loader

把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。

use: [
  {
    loader: 'thread-loader',
    // 有同样配置的 loader 会共享一个 worker 池(worker pool)
    options: {
      // 产生的 worker 的数量，默认是 (cpu 核心数 - 1)
      // 或者，在 require('os').cpus() 是 undefined 时回退至 1
      workers: 2,

      // 一个 worker 进程中并行执行工作的数量
      // 默认为 20
      workerParallelJobs: 50,

      // 额外的 Node.js 参数
      workerNodeArgs: ['--max-old-space-size=1024'],

      // Allow to respawn a dead worker pool
      // respawning slows down the entire compilation
      // and should be set to false for development
      poolRespawn: false,

      // 闲置时定时删除 worker 进程
      // 默认为 500ms
      // 可以设置为无穷大， 这样在监视模式(--watch)下可以保持 worker 持续存在
      poolTimeout: 2000,

      // 池(pool)分配给 worker 的工作数量
      // 默认为 200
      // 降低这个数值会降低总体的效率，但是会提升工作分布更均一
      poolParallelJobs: 50,

      // 池(pool)的名称
      // 可以修改名称来创建其余选项都一样的池(pool)
      name: 'my-pool',
    },
  },
  // your expensive loader (e.g babel-loader)
]