loader

loader 是什么？

• loader 就是一个打包的方案。对于特定的非 js 模块告诉 webpack 该如何打包。
• webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

有哪些常见的 loader，它们是解决什么问题的 ？

文件加载类

• raw-loader：加载文件原始内容（utf-8）
• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
• url-loader：与 file-loader 类似，区别是用户可以设置一个阈值 limit，大于阈值时返回其 publicPath，小于阈值时返回文件 base64 形式编码 (处理图片和字体)
• image-loader：加载并且压缩图片文件
• json-loader 加载 JSON 文件（默认包含）

代码转换类

• babel-loader：把 ES6 转换成 ES5
• ts-loader: 将 TypeScript 转换成 JavaScript
• awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
• sass-loader：将SCSS/SASS代码转换成CSS
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
• postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
• svg-inline-loader：将压缩后的 SVG 内容注入代码中
• handlebars-loader: 将 Handlebars 模版编译成函数并返回

检查、测试、调试类

• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• svg-inline-loader：将压缩后的 SVG 内容注入代码中
• handlebars-loader: 将 Handlebars 模版编译成函数并返回
• eslint-loader：通过 ESLint 检查 JavaScript 代码
• tslint-loader：通过 TSLint检查 TypeScript 代码
• mocha-loader：加载 Mocha 测试用例的代码
• coverjs-loader：计算测试的覆盖率
• vue-loader：加载 Vue.js 单文件组件
• i18n-loader: 国际化
• cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里

基础写法：

    module: {
        rules: [{
            test: /\.(jpg|png)$/, // 图片
            use: {
                loader: 'url-loader',
                options: {
                    // placeholder 占位符
                    name: '[name].[hash].[ext]', // 保留原名和扩展名儿
                    outputPath: 'img/', // 打包位置
                    limit: 2048 // 小于即转码 超出即直接复制
                }
            }
        }, {
            test: /\.(css|less)$/, // 样式
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.(woff|woff2|eot|ttf|otf)$/, //字体
            use: [
                'file-loader'
            ]
        }]
    },

loader 执行顺序：从上到下，从右到左。

• url-loader file-loader less-loader
  url-loader 由 limit 属性决定当其小于给定字节大小时，会将图片进行 base64 转码然后直接插入对应引入位置；反之则和 file-loader 一样直接复制到指定 path 中。

• css-loader style-loader
  css-loader 分析 css 文件之间的关系，然后合并到一起。style-loader 则把其挂载到 head 部分。两者相互配合。
  less-loader 解析 less 文件的语法成 css 语法。

• css-loader 后面可以跟 modules 属性，代表按模块打包 css 文件

    module: {
        rules: [{
            test: /.(js|jsx)$/,
            use: [
                'babel-loader'
            ],
            exclude: /node_modules/
        }, {
            test: /.css$/,
            // use: [ 'style-loader', 'css-loader?modules&localIdentName=[path]' ]
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader',
                options: {
                    modules: {
                        localIdentName: '[name]-[local]'
                    }
                }
            }]
        }]
    },