Loader

概述

Loader用于对模块源代码进行转换，在import或加载模块时预处理文件
默认情况下，在遇到import或者require加载模块的时候，webpack只支持对js和json文件打包。像css、sass、png等这些类型的文件的时候，webpack则无能为力，这个时候就需要配置对应的loader进行文件内容的解析。

img.png

使用方式

module.export = {
    module: {
        rules: [
            {
                test: /\.csss$/,
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    {loader: 'sass-loader'}
                ]
            }
        ]
    }
}

特点

因为loader支持链式调用，联众的每个loader会处理之前已处理过的资源，最终变为js代码。顺序为相反的顺序执行，即上述执行方式为sass-loader、css-loader、style-loader

• loader可以是同步的，也可以是异步的
• loader运行在Nodejs中，并且能够执行任何操作。
• 除了常见的通过package.json的面来讲一个npm模块导出为loader，还可以在module.rules中使用loader字段直接引用一个模块。
• 插件（plugin）可以为loader带来更多特性
• loader能够产生额外的任意文件。

常见的loader

1. Style-loader 将css添加到Dom的内联样式标签style中
2. Css-loader 允许将css文件通过require的方式引入，并返回css代码
3. Less-loader 处理less
4. Sass-loader 处理sass
5. Postcss-loader 处理css
6. Autoprefixer-loader 处理css 已弃用
7. File-loader 分发文件到output目录并返回相对路径
8. Url-loader 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
9. Html-minify-loader 压缩HTML
10. babel-loader 用babel来转化ES6文件到其他版本