常用的 webpack loader 及其作用

Question

在 webpack 中，use 数组中的 loader 的执行顺序是从后往前执行，即从右往左执行

• babel-loader：将 ES6+ 的代码转换为 ES5 的代码，使其能够在旧版浏览器中运行。
• css-loader：用于加载 CSS 文件，并且支持模块化、压缩、转换等功能。
• file-loader：用于加载文件资源，如图片、字体等，并将其输出到指定的目录中。
• url-loader：与 file-loader 类似，但可以将小于指定大小的文件转换为 base64 编码，减少HTTP请求的数量。
• style-loader：将 CSS 代码注入到HTML文件中的 style 标签中，使其能够生效。
• sass-loader：用于将 Sass/Scss 语法转换为CSS语法，并交给 css-loader 处理。
• less-loader：用于将 Less 语法转换为CSS语法，并交给 css-loader 处理。
• postcss-loader：用于对 CSS 代码进行后处理，如添加浏览器前缀、压缩代码等。
• eslint-loader：用于在打包过程中对 JavaScript 代码进行代码质量检查，如语法错误、代码风格等。
• ts-loader：用于将 TypeScript 代码转换为 JavaScript 代码，并交给 babel-loader 处理。