学习笔记

IOS 初学者

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

阅读更多
版权声明:本文自撰,转载先跟我说一下比较好 https://blog.csdn.net/KimBing/article/details/79951248
个人分类: web前端
上一篇PhpStorm 如何破解
下一篇CentOS 中文显示乱码解决
想对作者说点什么? 我来说一句

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

关闭
关闭