css-loader 处理css中路径引用等问题用于在js中加载css解释import和url()optionsalias: 解析别名importLoaders(import): 在css-loader前应用的loader的数目默认为0Minimize: true or false 是否开启css代码压缩比如压缩空格不换行modules: 是否开启css-modulemodule.exports{...module:{rules:[{test:/\.css$/,use:[style-loader,{loader:css-loader,options:{//当css文件中又引用了其他的css的时候需要设置importLoadersimportLoaders:1}}]}]}};style-loader 动态把样式写入css加载的css作为style标签内容插入到html中,以style/style形式在html页面中插入css代码optionsinsertAt: 插入位置insertInto: 插入到指定的domsingleton: true or false多个样式是否只生成一个style/style标签postcss-loaderpostcss-loader为了浏览器的兼容性有时候我们必须加上-webkitm, -ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行。postcss是一个CSS的处理平台可以帮CSS实现更多的功能。用法安装 postcss:npm install postcss-loader autoprefixer配置文件webpack.config.js:module:{rules:[{test:/\.css$/loader:style-loader!css-loader!postcss-loader}]}postcss.config.js module.exports{plugins:[require(autoprefixer)//在postcss-loader中引入autoprefixer插件]}或者constautoprefixerrequire(autoprefixer);module:{rules:[{test:/\.css$/,use:[style-loader,css-loader,{loader:postcss-loader,options:{plugins(){return[autoprefixer];}}}]}]}less-style添加对webpack的LESS支持。当遇到less文件时先交给less-loader处理然后交给css-loader最后交由style-loader处理然后执行webpack打包module:{rules:[{test:/\.less$/,loader:style-loader!css-loader!less-loader}]}要启用CSS的source map你需要将sourceMap选项传递给less-loader和css-loaderCSS SourceMap信息文件里面存储着位置信息。随着代码增多我们会对代码进行压缩代码压缩之后进行调bug定位会非常困难于是引入sourceMap记录压缩前后的位置信息当产生错误时直接定位到未压缩前的位置方便调试。简单来说就是记录压缩的翻译文件通过这个文件可以找到你的对应源码module.exports{...module:{rules:[{test:/\.less$/,use:[style-loader,css-loader,{loader:less-loader,options:{sourceMap:true}}]}]}};less-loader可用的options:modifyVars 或 globalVars声明全局变量: {Object}在less使用全局变量时我们可以定义一个全局变量的文件然后每次使用时都引用这个文件显而易见这个方法很麻烦。less还提供了另外的方法来声明全局变量即在options.globalVars/options.modifyVars里进行配置。modifyVars修改全局的less变量, globalVars声明全局的less变量module.exports{...module:{test:/\.less$/,use:[style-loader,css-loader,{loader:less-loader,options:{midifyVars:{bgColor:red;//或者bgColor: red,有没有都可以}/*globalVars: { bgColor: red; }*/}}]}};body{background-color:bgColor;//使用时必须有}编译后body{background-color:red;}