CSS样式文件相关loader

1、style-loader、css-loader

• 前者动态生成style标签挂载样式
• 后者处理css文件依赖

安装

npm i style-loader css-loader -D

webpack配置注意先后顺序，一定要写loader

module:{ 
    rules:[

         { test:/\.css/,use:['style-loader','css-loader?modules&localIndexName=[path][name]-[local]-[hash:6]'] }

  ]

}

2、css文件中一般包含字体图标等，字体文件loader   url-loader file-loader(前者内部依赖) 

安装

npm i url-loader file-loader -D

字体图标一般包含5种 

{ test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader' }