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

版权声明:本文自撰,转载先跟我说一下比较好 https://blog.csdn.net/KimBing/article/details/79951248

相信找到这个问题的同学已经差不多了解了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

阅读更多

没有更多推荐了,返回首页