面试题：Webpack 样式表模块化处理之高级难度：Webpack中如何对不同类型样式表（如CSS、Sass、Less）进行模块化处理并优化构建

Question

假设项目中同时使用CSS、Sass和Less三种样式表语言，阐述如何在Webpack中分别对它们进行模块化配置。并且说明在构建过程中，怎样通过Webpack插件或配置来优化样式表的打包体积和加载性能，例如如何实现样式的按需加载。

Answer 1

CSS模块化配置

1. 安装相关loader：

   npm install css - loader style - loader --save - dev
   

2. Webpack配置：

   module: {
       rules: [
           {
               test: /\.css$/,
               use: [
                  'style - loader',
                   {
                       loader: 'css - loader',
                       options: {
                           modules: true
                       }
                   }
               ]
           }
       ]
   }
   

   • style - loader将CSS插入到DOM中。
   • css - loader用于处理CSS文件，options.modules: true开启CSS模块化，生成唯一的类名。

Sass模块化配置

1. 安装相关loader：

   npm install sass - loader node - sass css - loader style - loader --save - dev
   

2. Webpack配置：

   module: {
       rules: [
           {
               test: /\.scss$/,
               use: [
                  'style - loader',
                   {
                       loader: 'css - loader',
                       options: {
                           modules: true
                       }
                   },
                  'sass - loader'
               ]
           }
       ]
   }
   

   • sass - loader将Sass编译成CSS，node - sass是其依赖的Sass编译器。css - loader和style - loader作用同CSS配置。

Less模块化配置

1. 安装相关loader：

   npm install less - loader less css - loader style - loader --save - dev
   

2. Webpack配置：

   module: {
       rules: [
           {
               test: /\.less$/,
               use: [
                  'style - loader',
                   {
                       loader: 'css - loader',
                       options: {
                           modules: true
                       }
                   },
                   'less - loader'
               ]
           }
       ]
   }
   

   • less - loader将Less编译成CSS，less是其依赖的Less编译器。css - loader和style - loader作用同CSS配置。

优化样式表打包体积和加载性能

1. 优化打包体积：

   • MiniCssExtractPlugin：
     • 安装：

       npm install mini - css - extract - plugin --save - dev
       

     • 配置：

       const MiniCssExtractPlugin = require('mini - css - extract - plugin');
       module.exports = {
           module: {
               rules: [
                   {
                       test: /\.(css|scss|less)$/,
                       use: [MiniCssExtractPlugin.loader, 'css - loader','sass - loader', 'less - loader']
                   }
               ]
           },
           plugins: [
               new MiniCssExtractPlugin({
                   filename: 'css/[name].[contenthash].css'
               })
           ]
       };
       

     • 该插件将CSS从JavaScript中提取出来，生成单独的CSS文件，减少JavaScript体积。filename指定CSS文件输出路径和命名规则。
   • OptimizeCSSAssetsPlugin：
     • 安装：

       npm install optimize - css - assets - plugin --save - dev
       

     • 配置：

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

     • 此插件用于压缩CSS文件，去除冗余代码，减小文件体积。

2. 实现样式按需加载：

   • 使用@babel/plugin - proposal - dynamic - import：在JavaScript中动态导入CSS模块。例如：
     • 安装：

       npm install @babel/plugin - proposal - dynamic - import --save - dev
       

     • Babel配置（.babelrc或babel.config.js）：

       {
           "plugins": ["@babel/plugin - proposal - dynamic - import"]
       }
       

     • 代码中使用：

       async function loadStyles() {
           await import('./styles.css');
       }
       

   • 结合mini - css - extract - plugin：它支持按需加载CSS。通过上述MiniCssExtractPlugin配置，Webpack会将每个按需加载的CSS模块生成单独的CSS文件，在运行时根据需要加载。