Webpack入门，常用loader

babel-loader

babel-loader用于处理ES6+并将其编译为ES5，它使开发者能够在工程中使用最新的语言特性，同时不必特别关注这些特性在不同平台的兼容问题。

在安装时推荐使用以下命令：

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

各个模块的作用如下：

babel-loader：它是使Babel与Webpack协同工作的模块。
babel/core：顾名思义，它是Babel编译器的核心模块。
babel/preset-env：它是Babel官方推荐的预置器。可根据用户设置的目标环境自动添加所需要的插件和补丁来编译ES6+代码。

在配置babel-loader时有一些需要注意的地方。

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          presets: [[
            'env', {
               modules: false
             }
          ]]
        }
      }
    }]
  }
}

由于该规则中的babel-loader会对所有JS后缀文件生效，所以我们需要特别排除掉node_modules目录，否则会令babel-loader编译其中所有的模块，严重拖慢打包的速度，甚至改变第三方模块的原有行为。

对于babel-loader本身添加了cacheDirectory配置项，它会启用缓存机制，在重复打包未改变过的模块时防止二次编译，加快打包的速度。cacheDirectory可以接收一个字符串类型的路径来作为缓存路径，这个值也可以为true，此时其缓存目录会指向node_modules/.cache/babel-loader。

由于babel/preset-env会将ES6 Module转化为CommonJS的形式，这会导致Webpack中tree-shaking特性失效。将babel/presets-env的modules配置项设置为false会禁用模块语句的转化，而将ES6 Module的语法交给Webpack本身处理。

温馨提示
babel-loader支持从.babelrc文件读取Babel配置，因此可以将presets和plugins从Webpack配置文件中提取出来，效果是相同的。

ts-loader

ts-loader与babel-loader的性质类似，它是用于连接Webpack与TypeScript的模块。可以使用以下命令安装。

npm install ts-loader typescript -D

Webpack配置如下：

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader',
    }]
  }
}

需要注意的是，TypeScript本身的配置并不在ts-loader中，而是必须放在工程目录下的tsconfig.json中。

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,  
  }
}

通过TypeScript和ts-loader，开发者可以实现代码类型检查。

html-loader

html-loader用于将HTML文件转化为字符串并进行格式化，使得我们可以把一个HTML片段通过JS加载进来。

安装命令如下：

npm install html-loader -D

Webpack配置如下：

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.html$/,
      use: 'html-loader',
    }]
  }
}

handlebars-loader

handlebars-loader用于处理handlebars模板，在安装时要额外安装handlebars。

安装命令如下：

npm install handlebars-loader handlebars -D

Webpack配置如下：

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.handlebars$/,
      use: 'handlebars-loader',
    }]
  }
}

file-loader

file-loader用于打包文件类型的资源，并返回其publicPath。

安装命令如下：

npm install file-loader -D

Webpack配置如下：

// webpack.config.js
const path = require("path");
module.exports = {
  entry: "./app.js",
  output: {
    path: path.join(__dirname,'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: 'file-loader',
    }]
  }
}

上面的配置对png、jpg、gif这类图片资源使用file-loader，然后就可以在JS中加载图片了。

url-loader

url-loader的作用与file-loader类似，唯一的不同在于，url-loader允许用户设置一个文件大小的阈值，当大于该阈值时它会与file-loader一样返回publicPath，而小于该阈值时则返回base64形式的编码。

安装命令如下：

npm install url-loader -D

Webpack配置如下：

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.(png|gif|jpg)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: '[name].[ext]',
          publicPath: './assets-path/',
        }
      }
    }]
  }

原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/webpack-common-loader.html