面试题：JavaScript中Webpack如何配置处理CSS文件

Question

在一个JavaScript项目中使用Webpack进行模块打包，假设项目中有普通的CSS文件需要处理，阐述Webpack配置中需要用到哪些loader以及基本的配置步骤。

Answer 1

1. 需要用到的loader：
   • css-loader：用于处理CSS文件中的@import和url()等引入外部资源的语句，将CSS转化为JavaScript模块。
   • style-loader：将CSS通过<style>标签注入到DOM中，使得样式生效。
2. 基本配置步骤：
   • 安装相关loader：在项目根目录下通过npm或yarn安装css-loader和style-loader。

     npm install css-loader style-loader --save-dev
     # 或者
     yarn add css-loader style-loader -D
     

   • 在Webpack配置文件（通常是webpack.config.js）中进行如下配置：

     module.exports = {
       module: {
         rules: [
           {
             test: /\.css$/,
             use: [
              'style-loader',
               'css-loader'
             ]
           }
         ]
       }
     };
     

   • 上述配置中，test指定匹配CSS文件的规则，use数组中指定了处理CSS文件需要使用的loader，loader的执行顺序是从右到左（从下到上），先由css-loader处理，再由style-loader处理。