面试题：Webpack中如何配置实现LESS和SASS混合使用并优化打包体积

Question

假设你正在开发一个大型前端项目，需要同时使用LESS和SASS两种样式表语言，并且要尽可能优化打包后的体积。请描述在Webpack中的详细配置步骤，包括所需的loader及插件等，并解释每一步配置的意义。

Answer 1

1. 安装相关依赖：
   • 安装less、less - loader：npm install less less - loader --save - dev。less是LESS样式表语言的解析器，less - loader用于在Webpack中处理LESS文件。
   • 安装sass - loader、node - sass：npm install sass - loader node - sass --save - dev。node - sass是SASS样式表语言的解析器，sass - loader用于在Webpack中处理SASS文件。
2. 配置Webpack的module.rules：

   module: {
       rules: [
           {
               test: /\.less$/,
               use: [
                   'style - loader',
                    'css - loader',
                    'less - loader'
               ]
           },
           {
               test: /\.s[ac]ss$/,
               use: [
                   'style - loader',
                    'css - loader',
                   'sass - loader'
               ]
           }
       ]
   }
   

   • test字段：用于匹配对应的文件扩展名。/\.less$/匹配所有.less文件，/\.s[ac]ss$/匹配所有.sass和.scss文件。
   • use数组：定义了从右到左（从下到上）的loader链。
     • less - loader/sass - loader：将LESS/SASS文件编译成CSS。
     • css - loader：处理CSS文件中的@import和url()等，将CSS文件转化为JavaScript模块。
     • style - loader：将CSS通过<style>标签插入到HTML页面中。
3. 优化打包体积：
   • 压缩CSS：安装css - minimizer - webpack - plugin：npm install css - minimizer - webpack - plugin --save - dev。 在Webpack配置文件的optimization.minimizer中添加：

   const CssMinimizerPlugin = require('css - minimizer - webpack - plugin');
   module.exports = {
       optimization: {
           minimizer: [
               new CssMinimizerPlugin()
           ]
       }
   }
   

   CssMinimizerPlugin会在Webpack打包过程中压缩CSS代码，减少打包后的体积。
   • Tree - shaking CSS：在package.json中添加sideEffects字段：

   {
       "sideEffects": false
   }
   

   这告诉Webpack哪些文件有副作用（如样式文件一般有副作用），Webpack可以更好地进行Tree - shaking，去除未使用的CSS代码，进一步优化体积。