四、Webpack加载器操作指南（安装与配置）

Webpack默认仅支持对带有.js后缀名的模块文件进行打包处理。但若要实现正常的打包功能，则必须依赖于loader加载器的帮助。该组件通过提供预定义的配置选项和接口设计，《Loader》组件能够帮助Webpack更灵活地识别并聚合所需的资源。如果未启用相关组件，则会导致打包过程异常中断或运行时错误。

• 该类工具负责打包管理与.css文件相关的内容
• 另一个工具专注于打包管理与-less文件相关的内容
• 第三个工具负责管理与.css中的图片URL相关的内容
• 最后一种类型负责管理那些Webpack无法直接解析的高级JavaScript语法内容

css

1. 安装 npm i style-loader css-loader -D
2. 配置：

    // webpack.config.js
    module.exports = {
    	mode:'development',
    	...,
    	module:{//所有的第三方文件模块匹配规则
    		rules:[//文件后缀名的匹配规则
    			{test:/\.css$/,use:['style-loader','css-loader']}，//use数组中多个loader的位置不能换，否则不生效，但是loader的调用顺序是从后往前，及先css