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

原创

十月ooOO 2022-06-30 11:20:35 ©著作权

文章标签 webpack 前端 web loders css 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者十月ooOO的原创作品，请联系作者获取转载授权，否则将追究法律责任

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