webpack.config.js 中 loders use rules 的关系个人见解

相信找到这个问题的同学已经差不多了解了webpack，先看一下它的配置文件 webpack.config.js 的结构

module.exports = {
	//入口
    entry: "./src/js/main.js",
    
	//出口
    output: { 
        path: __dirname + "/public", //出口路径（必须是绝对路径，如果不想写的很繁琐，还是用 __dirname 的好）
        filename: "bundle.js" //出口文件名
    },

	//用到的模块
    module: {
        rules: [
            { test: /\.(css|less)$/,   use: ["style-loader", "css-loader", "less-loader"] }
        ]
    }
}

现在说一下 ‘module’ 的结构

module: {
    rules: [ // 里面是对于什么样的文件用什么来处理
        { //其格式就是 test 和 use, test 指明需要处理的文件的正则表达式，如果匹配就用 use 指定的 loader 处理该文件
         test: /\.(css|less)$/,   
         use: [
	         {
		      loader: "style-loader", // use 里面才是loader
		      options: ""
		     },
	         {
		      loader: "css-loader",
		      options: ""
		     },
		     {
		      loader: "less-loader",
		      options: ""
		     }
         ] 
        },
        { 
         test: /\.(css|less)$/,   
         use: ["style-loader", "css-loader", "less-loader"] // 这个是上面那个use的缩写
        }
    ]
}

参考阅读（官方文档）： https://webpack.js.org/configuration/module/#rule-use