Webpack 3 Loader 全解析：从概念到实战配置

Webpack Loader 核心概念

首先参考 webpack 官方网站，明确 webpack 的核心功能。官网给出的定义简洁明了：让一切变得简单！

面对层出不穷的各种 loader，构建过程往往令人困惑。为此，本文将对 loader 进行全面解析与总结。

概念

loader，顾名思义即加载器。其英文官方解释如下：

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

将其翻译为中文：

loader 用于对模块的源代码进行转换。在 import 或“加载”模块时，loader 允许你对文件进行预处理。因此，loader 类似于其他构建工具中的“任务(task)”，提供了处理前端构建步骤的强大方法。它可以将不同语言（如 TypeScript）的文件转换为 JavaScript，或将内联图像转换为 data URL。甚至允许你直接在 JavaScript 模块中 import CSS 文件！

由此可见 loader 的强大功能，下面进行具体分析：

1. 转换作用。开发过程中使用的各种资源，最终都需要转换为网页加载所必需的 html、css、js、img 等格式文件。
2. 转换对象是源代码。loader 仅负责源代码的转换，其他功能则由 plugins 来弥补其不足。

总结来说：loader 是加载机器，形象比喻就像一个豆浆机，放入原料后它便开始工作！

常用 Loader 配置详解

常用的 loader

1、babel-loader

This package allows transpiling JavaScript files using Babel and webpack.

用于加载 ES2015+ 代码，并通过 Babel 转译为 ES5。

安装：

npm install --save-dev babel-loader babel-core babel-preset-env webpack 

使用：

{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: 'babel-loader'
}

2、style-loader

Adds CSS to the DOM by injecting a <style> tag

将模块导出的样式添加到 DOM 中。

安装：

npm install style-loader --save-dev 

建议与 css-loader 配合使用。

使用：

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

3、css-loader

解析 CSS 文件后，使用 import 加载，并返回 CSS 代码。

安装：

npm install css-loader --save-dev 

使用：

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

4、less-loader

加载和转译 LESS 文件。

安装：

npm install --save-dev less-loader less 

使用：

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

5、url-loader

Loads files as base64 encoded URL

处理图片类文件，若文件大小小于限制值，则返回 data URL。

安装：

npm install --save-dev url-loader 

使用：

{
 test: /\.(jpg|jpeg|png|gif)$/,
 loader: 'url-loader',
 options: {
   limit: 8192
 }
}

6、file-loader

Instructs webpack to emit the required object as file and to return its public URL

处理 font/svg 等文件，将文件输出到文件夹并返回（相对）URL。

安装：

npm install file-loader --save-dev 

使用：

{
 test: /\.(woff|woff2|svg|eot|ttf)$/,
 use: 'file-loader'
}

7、vue-loader

加载和转译 Vue 组件。

安装：

npm install --save-dev vue-loader vue vue-template-compiler 

使用：

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     less: ExtractTextPlugin.extract({
       use: ['css-loader', 'less-loader'],
       fallback: 'vue-style-loader'
     })
   }
 }
}

至此，有关 loader 中使用的其他参数请移步官网查询解决，感谢查阅！以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。