webpack简易教程之loader

webpack自称能够打包任何文件，这句话咋听一下好像在吹牛逼，因为webpack本身只能理解JavaScript。但是由于webpack中有loader的存在，可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力对它们进行处理————前提是要有对应的loader存在

Loader特性

• loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何可能的操作。
• loader 接收查询参数。用于对 loader 传递配置。
• loader 也能够使用 options 对象进行配置。
• 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。

当然，上面这些特性暂时看不明白也没关系，学会如何使用才是重点。所以重点看如何使用Loader

使用Loader

下面是常见的webpack配置的基本结构：

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        ...
    }
}

其中entry用来设置webpack的入口文件，output是用来设置打包后的文件输出位置以及相应的文件名。这里就不详细介绍，下面我们来看一下常见的loader配置：

在文件中配置

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            {
                test: /\.sass$/,
                use: ['sass-loader','node-sass']
            },
            {
                test: /\.(png|jp?eg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.json$/,
                use: ['json-loader']
            },
            {
                test: /\.txt$/,
                use: ['raw-loader']
            }
        ]
    }
}

rules数组里面的每个对象都对应着一个匹配规则，从上到下分别匹配.css文件，.sass文件，图片文件，.json文件以及.txt文本文件
另外，在运行之前千万记得要安装对应的依赖，示例：

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

直接导入

可以在 import 语句或任何等效于 import 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。?后面可以传递参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}

import Styles from 'style-loader!css-loader?modules!./styles.css';

通过CLI使用loader

示例：webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

以上三种配置方式，第一种应该用的比较多，毕竟配置也比较方便...

总结

在配置loader的时候尽量使用文件进行配置，并且可以在官方文档找到相应的loader，具体的参数传入可以在npm官网上找到，可以根据具体的需求来设置

扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。