第4章 预处理器
在前端工程化的大潮中，Webpack作为模块打包器的佼佼者，不仅能够处理JavaScript，还能通过加载器（loaders）机制无缝集成各种预处理器，为开发者提供从CSS到图片、字体、模板等多种资源的预处理能力。预处理器通常用于增强原生语言的功能，使之更加适合大型项目的开发需求，提升开发效率和代码质量。本章将深入探讨Webpack中预处理器的应用，包括CSS预处理器、模板预处理器以及文件处理预处理器等。
4.1 CSS预处理器
CSS预处理器是CSS的一种扩展语言，它允许你使用变量、嵌套规则、混合（mixins）、函数等编程特性来编写CSS，使CSS代码更加模块化、可维护和复用。目前市面上流行的CSS预处理器主要有Sass（SCSS）、Less和Stylus。
4.1.1 Sass/SCSS
Sass（Syntactically Awesome Stylesheets）是最早也是最流行的CSS预处理器之一，其后推出的SCSS（Sassy CSS）是其语法上的改进版，完全兼容CSS语法，学习成本更低。Sass/SCSS通过变量、嵌套、混合等特性，极大提高了CSS的编写效率和可维护性。
在Webpack中配置Sass/SCSS：
安装依赖：首先，你需要安装
node-sass（或sass，node-sass已逐渐被sass官方库取代）、sass-loader以及css-loader和style-loader（用于将CSS注入到DOM中）。npm install --save-dev sass sass-loader css-loader style-loader
配置Webpack：在
webpack.config.js文件中，你需要添加相应的module.rules来处理.scss或.sass文件。module: {rules: [{test: /\.s[ac]ss$/i,use: ['style-loader', // 将 JS 字符串生成为 style 节点'css-loader', // 将 CSS 转化成 CommonJS 模块'sass-loader', // 将 Sass 编译成 CSS],},],}
使用Sass/SCSS：在你的项目中，你现在可以自由地编写Sass/SCSS代码了。例如，定义一个变量并在多处使用它：
// _variables.scss$primary-color: #3498db;// main.scss@import 'variables';body {color: $primary-color;}
4.1.2 Less
Less与Sass类似，但拥有自己的一套语法体系。Less通过.less文件扩展名来标识，它同样支持变量、嵌套、混合等功能，且学习曲线较为平缓。
在Webpack中配置Less：
安装依赖：安装
less、less-loader以及css-loader和style-loader。npm install --save-dev less less-loader css-loader style-loader
配置Webpack：与Sass/SCSS类似，但使用的是
less-loader。module: {rules: [{test: /\.less$/,use: ['style-loader','css-loader','less-loader',],},],}
4.1.3 Stylus
Stylus是一个高效、富有表达力的CSS预处理器，它允许你使用简洁的语法来编写CSS，并且支持许多高级特性如条件语句、循环等。
在Webpack中配置Stylus：
安装依赖：安装
stylus、stylus-loader以及css-loader和style-loader。npm install --save-dev stylus stylus-loader css-loader style-loader
配置Webpack：使用
stylus-loader来处理.styl或.stylus文件。module: {rules: [{test: /\.styl(us)?$/,use: ['style-loader','css-loader','stylus-loader',],},],}
4.2 模板预处理器
模板预处理器主要用于HTML模板的处理，它们通过添加逻辑、循环、条件语句等能力，使HTML模板更加灵活和强大。在Webpack中，常用的模板预处理器有Pug（原Jade）、Handlebars、EJS等。
4.2.1 Pug
Pug是一个高性能的模板引擎，它使用简洁的语法来编写HTML模板，并支持变量、条件语句、循环等特性。
在Webpack中配置Pug：
安装依赖：安装
pug、pug-loader或更常用的html-loader（虽然html-loader不是专门为Pug设计的，但可以通过插件支持Pug）。npm install --save-dev pug html-loader
注意：
pug-loader现已不维护，推荐使用html-loader结合Pug插件或其他方式。配置Webpack：使用
html-loader时，可能需要额外的插件来支持Pug，如pug-html-loader。module: {rules: [{test: /\.pug$/,loader: 'pug-html-loader', // 假设有这样的loader，实际可能需要自定义配置},],}
或者，你可以使用Webpack的插件系统，在构建流程中转换Pug文件。
4.2.2 Handlebars
Handlebars是一个简单而强大的模板引擎，它允许你将数据绑定到HTML模板上，并通过简单的条件语句和循环来控制模板的输出。
在Webpack中集成Handlebars：
由于Webpack主要处理模块打包，直接处理Handlebars模板可能需要借助额外的工具，如通过自定义loader或插件，或者将Handlebars模板预处理成JavaScript模块后再引入Webpack构建流程。
4.3 文件处理预处理器
除了CSS和模板外，Webpack还支持对图片、字体、视频等文件进行预处理。这些预处理通常涉及文件的压缩、优化、转换格式等操作，以提高加载速度和改善用户体验。
4.3.1 图片处理
Webpack通过file-loader、url-loader和image-webpack-loader等加载器来处理图片文件。file-loader会将图片文件移动到输出目录，并返回（相对）URL；url-loader类似于file-loader，但能在文件小于限制时返回DataURL；image-webpack-loader则用于对图片进行压缩和优化。
配置示例：
module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource', // Webpack 5推荐使用// 或者在Webpack 4及以下版本中使用// use: [// 'file-loader',// {// loader: 'image-webpack-loader',// options: {// mozjpeg: { progressive: true, quality: 65 },// optipng: { enabled: false, },// pngquant: { quality: [0.65, 0.90], speed: 4},// gifsicle: { interlaced: false, },// webp: { quality: 75 }// }// }// ],},],}
注意：上述配置中的type: 'asset/resource'是Webpack 5中引入的Asset Modules，用于替代file-loader和url-loader。
总结
预处理器是Webpack生态中不可或缺的一部分，它们通过增强原生语言的能力，极大地提升了前端开发的效率和项目的可维护性。在CSS预处理器方面，Sass/SCSS、Less和Stylus各有千秋，选择哪个取决于个人喜好和项目需求。模板预处理器则让HTML模板的编写更加灵活和强大。文件处理预处理器则专注于优化非代码资源，提升应用性能。掌握这些预处理器的配置和使用，将有助于你更好地利用Webpack构建高效、可维护的前端项目。
