webpack配置文件(loader)

这篇写的很详细

https://segmentfault.com/a/1190000012718374#articleHeader9

 主要的配置项:

test:必须 匹配需要处理的文件的扩展名

use:必须 需要使用的模块

include/exclude:非必须 需要处理的文件夹/不需要处理的文件夹

options:非必须 扩展项

Loader 的执行顺序是由后到前的

有三种写法:

// 1.use

module:{

  rules:[

    {

      test:/\.css$/,

      use:['vue-style-loader','css-loader']   

    }

  ]

}

//2.loader

module:{

  rules:[

    {

      test:/\.css$/,

      loader:['vue-style-loader','css-loader']

    }

  ]

}

//3.use +loader 

module:{

  rules:[

    test:/\.css$/,

    use:[

      {

        "loader":"vue-style-loader "

      },{

        "loader":"css-loader",

        options:{

          minimize:true

        }

      }

    ]

  ]

}

常见的写法:

use:['vue-style-loader','css-loader?minimize]  中的minimize 告诉 css-loader 要开启 CSS 压缩。

https://github.com/webpack-contrib/css-loader.git 

猜你喜欢

转载自www.cnblogs.com/fangyinghua/p/9232755.html