Webpack探索【3】--- loader详解

本文主要说明Webpack的loader相关内容。

一 说明 

webpack开箱即用只支持js和JSON两种文件类型，对其它css、img、less、ts等文件类型都是不支持的。loaders使得Webpack可以认识其它各种文件类型，并将它们转换成优先的js模块代码，并且可以添加到依赖图中。

Webpack本身是一个函数，接受源文件作为参数，返回转换结果。

二 基本语法

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

在你的应用程序中，有三种使用 loader 的方式：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。
• 内联：在每个 import 语句中显式指定 loader。
• CLI：在 shell 命令中指定它们。

详细参考Webpack官网：

https://www.webpackjs.com/concepts/loaders/

三 常用的loaders

3.1 babel-loader

转换ES6、ES7等JS新特性语法。

3.2 css-loader

Webpack不支持css文件的解析，通过css-loader支持.css文件的加载和解析。

3.3 less-loader

将less文件转换为css

3.4 ts-loader

将TS转测成js

3.5 file-loader

进行图片、字体 等的打包

3.6 raw-loader

首屏的资源可能需要内联，将文件以字符串的形式导入

3.7 thread-loader

正常情况下，Webpack是开一个进程。thread-loader将开启多进程打包js和css，提升打包速度。