webpack系列之常用的loader介绍

沐晓
183 阅读3分钟

webpack 是个很强大的构建工具，其丰富灵活的配置决定了使用也不简单。在面试中经常能遇到 webpack 相关的问题，如果平常只是使用脚手架如 vue-cli 而没有好好深入学习研究 webpack 的话，估计答不上什么。我相信，如果没有深入了解，部分面试官也问不出什么。可能也就变成了两个人侃侃如何配置出入口，常见的 loader，plugin 有哪些。

作为一名多年油条前端，一直没有正视 webpack 相关知识，面对 webpack 相关的面试题更是一问三不知。这次准备好好学习研究 webpack相关内容，并且将学习内容记录成 webpack 系列，希望可以让不了解 webpack 的小白能对其有所掌握。

常用的loader

webpack 的强大功能之一就在于其丰富的 loader，针对不同的文件，我们可以配置不同的 loader 来解析并处理。下面将介绍几个常见的 loader 及其简单配置。

css-loader

用于解析 css 文件

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

style-loader

和 css-loader 是配套使用的，根据 loader 的单一功能原则，css-loader 仅仅用于解析 css 文件，需要配合 style-loader 将解析后的 css 插入 html 文档中

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

less-loader

用于解析 less 文件，需要在 css-loader 的前面执行（ps:根据 loader 执行顺序，后面的先执行，所以得放后面）

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

postcss-loader

用于预处理 css，例如为 css3 样式添加兼容性前缀

{
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            // autoprefixer 需要单独安装
            plugins: ['autoprefixer']
        }
    }
}

autoprefixer 根据项目配置文件，如 .browserslistrc 判断所需兼容的版本信息

.browserslistrc

> 0.1%
last 2 versions

postcss-loader 还可以配置 px 自动编译成 vw，有兴趣的可以了解了解 postcss-px-to-viewport

file-loader

用于处理图片字体等文件的相对路径引用，如在 js 或 css 通过相对路径引用图片。file-loader 将对应的资源（图片，字体）解析并输出到打包目录中，并根据打包后文件自动引用正确的文件路径。

{
    test: /\.(png|jpg|gif)$/,
    use: [
        'file-loader',
    ]
}

url-loader

url-loader 和 file-loader 也是很多人分不清楚的两个 loader，url-loader 其实包含了 file-loader，属于 file-loader 的加强版，和 file-loader 相比，它可以配置将小于一定 size 的资源打包成 base64 字符串，而非输出文件。

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192 // 单位byte
            }
        }]
}

eslint-loader

eslint 是用于 js 语法规则及代码风格检查的插件。我们在 webpack 中配置 eslint-loader 可以在编译的输出框中看到不符合规范的代码（报红）。

{
    test: /\.js$/,
    use: ['eslint-loader']
}

eslint 的语法风格可以在项目配置文件中配置

.eslintrc

{
  "rules": {
      "semi": "error"
  },
  "parserOptions": {
    "ecmaVersion": 6
  }
}

简单说下 eslint， eslint-loader 和 .eslintrc 的关系

  • eslint 是用于语法规则及代码风格检查的插件，我们可以在项目中单独安装 eslint，然后使用命令行检查文件是否符合规范
eslint [file]

或者自动修复

eslint [file] --fix

  • .eslintrc 是用于个性化配置 eslint 规则的文件，比如有的人喜欢 2 个空格缩进，有的人喜欢 4 个空格缩进。没有在 .eslintrc 中配置的讲按照默认规则进行检查。

  • eslint-loader 是用于在 webpack 编译的时候，自动使用 eslint 检测所有没被屏蔽的 js 文件，并输出不符合规范的代码及提示。其功能依赖于 eslint，所有需要添加 eslint。

值得一提的是，我们可以在编辑器（如 vscode）中添加对应的 eslint 插件，实现在代码的编写过程中自动实时的提示不规范之处及保存自动修复，其规范的判断也会读取项目中的 .eslintrc 或其它配置文件。

babel-loader

babel-loader 用于将 es6 及以上的代码编译为 es5 代码

{
    test: /\.js$/,
    use: ['babel-loader']
}

babel 的配置一般也放在单独文件中

.babelrc

{
    "presets": ["@babel/preset-env"]
}

babel 的配置其实比较复杂繁多，后面讲单独进行介绍。

raw-loader

将 txt 文件内容解析为字符串

{
    test: /\.txt$/,
    use: [
        {
            loader: 'raw-loader',
            options: {
                esModule: false,
            }
        }
    ]
}

结语

得益于脚手架的齐全配置，我们无需配置繁琐的插件和 loader 即可进行开发及打包上线。但也由于脚手架帮我们封装好了这些配置，导致我们不清楚我们的项目到底是如何跑起来的，遇到错误或问题时也不能快速定位及解决问题。所以，该了解的东西还是了解了解吧。

参考

欢迎到前端菜鸟群一起划水～516913974

avatar
文章
阅读
粉丝