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

标签: webpack 前端 web loders
6人阅读 评论(0) 收藏 举报
分类:

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

查看评论

webpack.config.js全部有关配置

'use strict'; const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin...
  • qq_37608036
  • qq_37608036
  • 2017-07-09 19:44:07
  • 1674

webpack.config.js 参数详解

webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块。var webpack = require('webpack'); module.expo...
  • zaichuanguanshui
  • zaichuanguanshui
  • 2016-12-13 16:04:58
  • 25048

webpack ^4.0.1 版本的webpack.config.js配置

var path = require("path"); module.exports = { entry:'./app/index.js', output:{ ...
  • sunling112
  • sunling112
  • 2018-03-02 16:06:44
  • 631

error in ./src/main.js ✘ http://eslint.org/docs/rules/quotes Strings must use singlequote

使用es6时报错;error in ./src/main.js✘ http://eslint.org/docs/rules/quotes Strings must use singlequote...
  • Efficiency9
  • Efficiency9
  • 2017-09-08 16:36:32
  • 2020

webpack.config.js文件配置

var webpack = require('webpack'); //加载路径解析库 var path = require('path'); //yargs解决了如何处理命令行参数的问题 var...
  • Chasing_sun
  • Chasing_sun
  • 2017-11-16 13:38:18
  • 429

Vue.js学习系列五 —— 从VUE-CLI来聊聊ESLint

最近在用vue-cli写项目的时候,经常和ESLint打交道,也算是不打不相识啦。下面总结一下在学习Vue的时候遇到的一些问题。...
  • violetjack0808
  • violetjack0808
  • 2017-05-22 06:40:41
  • 7738

webpack 浅析 webpack.config.js 文件的简单配置

1,在项目跟目录下 创建webpack.config.js 文件 文件内容如下: 2,项目目录 3,使用 webpack 命令编译 成功后会在dist/js 目录下输出 文...
  • s310558652
  • s310558652
  • 2017-03-14 23:21:43
  • 562

webpack.config.js解析

var path = require('path'); var webpack = require("webpack"); var CopyWebpackPlugin = require('cop...
  • bing_JavaScript
  • bing_JavaScript
  • 2016-10-20 15:44:47
  • 1210

webpack填坑之路

昨天今天一直在捣腾react和webpack结合,巨坑。。。心累。。。昨天差点就要放弃了,可是晚上想想又不甘心。。。今天又来苦逼地看文档。。。总算有个初步的结果!(具体坑就不详细写了,又多又细又杂@-...
  • heyue_99
  • heyue_99
  • 2017-03-17 20:12:26
  • 1172

webpack.config.js配置文件

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一...
  • qq_15602525
  • qq_15602525
  • 2017-04-12 18:12:51
  • 1730
    个人资料
    持之以恒
    等级:
    访问量: 23万+
    积分: 3446
    排名: 1万+
    最新评论