Webpack基础配置(三)

前言

• 问：为什么使用loader？

  • webpack自身只能理解js类型的文件，loader可以将所有类型的文件转换为webpack可以处理的有效模块。

• 问：本节有哪些loader？

  • style-loader、css-loader、less-loader、sass-loader、postcss-loader

.css 文件

css-loader

1. 下载相关loader
   yarn add style-loader css-loader --dev

2. webpack.config.js文件中添加规则

   {  
     test: /\.css$/,  
     use: ['style-loader', 'css-loader']
   }        

   loader的加载顺序为从右至左
   css-loader：将.css文件的内容转化为js字符串
   style-loader：动态创建