webpack是如何处理css/less资源的？css-loader首先创建一个空文件夹，通过npminit-y初始化项目，项目结构如下demo├─src│├─css││└─index.css│├─js││└─component。js│└─index.js├─index.html└─package.json在component.js中创建一个div元素并设置class，在index.css中定义样式，最后在component.js中导入component.js和index.css文件index.js//component.jsconstdivEl=document.createElement("div");consttext=document.createTextNode("hellowebpack");divEl.appendChild(text);divEl.setAttribute("class","element“）;文档。body.appendChild(divEl);//index.css.element{font-size:20px;font-weight:bold;}//index.jsimport"./js/component";import"./css/index.css";在package.json配置build命令后，使用npmrunbuild运行项目，此时无法编译。它报告一条错误消息“您可能需要一个适当的加载器来处理此文件类型，当前没有配置加载器来处理此文件。”用来处理css资源的loader是css-loader。项目中安装npmicss-loader-D后，在项目根目录新建webpack.config.js文件，在模块对象的规则中进行配置。test通过正则表达式匹配文件后缀，use表示使用的loader。constpath=require("path");module.exports={entry:"./src/index.js",output:{path:path.resolve(__dirname,"dist"),文件名:"bundle.js",},module:{rules:[{test:/\.css$/,use:["css-loader"],},],},};再次运行npmrunbuild运行项目，现在可以编译通过添加~index.html导入打包后的bundle.js，通过LiveServer运行html文件style-loader，可以看到div标签html页面，但是css不生效，因为css-loader只负责解析css，并不会把css插入到页面中，这需要style-loader来完成。通过npmistyle-loader-D安装后，在webpack.config.js中进行配置。对于css文件，需要先通过css-loader解析，然后通过style-loader插入到页面中。loader的执行顺序是从后往前，所以style-loader放在css-loader的前面。module:{rules:[{test:/\.css$/,use:["style-loader","css-loader"],},],}，css文件中的样式现在可以生效了，你可以看到style-loader的作用是创建一个style标签，将css-loader解析出来的css内容插入到less-loader中，在css文件夹下添加一个index.less文件，将//index导入到index.js中.less@color:red;.element{color:@color;}//index.jsimport"./css/index.less";运行后也会提示没有合适的loader来处理less文件。使用less-loader，但是实际的less-loader需要less工具的帮助，less文件中的代码可以直接被less工具处理成浏览器可以识别并执行的css代码npxless./src/css/index.less>./src/css/revert.css命令使用less工具将index.less文件解析为revert.css。在webpack.config.js中，只需要配置less-loader即可。less-loader需要先处理less资源到css中，所以放在最后Facemodule:{rules:[{{test:/\.css$/,use:["style-loader","css-loader"],},{test:/\.less$/,use:["style-loader","css-loader","less-loader"],},],},重新编译后可以看到less设置浏览器样式生效，css和less使用style-loader分别创建两个样式标签。PostCSSPostCSS是一个通过JavaScript进行样式转换的工具，可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀和css样式，但是PostCSS不能直接实现，需要相应的插件。例如，以下css代码可能与某些浏览器不兼容。可以手动添加浏览器前缀使其兼容，但是太麻烦了，而且不知道自己需要兼容哪些版本的浏览器。使用工具是更好的解决方案。.content{用户选择：无；颜色：#12345678；transition:all2sease;}文件可以通过postcss-cli解析处理，命令npxpostcss-oresult.css./src/css/component.css虽然编译的时候没有报错，但是文件不是编译后兼容，因为没有指定插件，分别指定两个插件看编译结果npxpostcss--useautoprefixer-oautoprefixer.css./src/css/component.cssnpxpostcss--usepostcss-preset-env-opreset.css./src/css/component.cssautoprefixer只负责添加浏览器前缀postcss-preset-envcss进行转换，比如将十六进制颜色转换为rgb，内置autoprefixerpostcss-loader在webpack环境下，使用postcss-loader处理css兼容。同时需要配置插件，autoprefixer和postcss-preset-env都有。{测试：/\.css$/，使用：[“style-loader”，“css-loader”，{加载器：“postcss-loader”，选项：{postcssOptions：{插件：[require(“postcss-preset-env")],},},},],}，添加前缀和样式转换后的代码可以在浏览器中添加browsersList通过postcss处理css代码兼容性，但是我们可以看到上面定义中的属性transitioncss3可能对部分浏览器有兼容性问题，不过这里没有加浏览器前缀。这是因为没有指定浏览器兼容版本，编译支持的浏览器版本采用默认配置。默认配置的浏览器已经可以支持transition属性。我们可以通过browsersList指定浏览器兼容版本，可以在package.json或者.browserslistrc文件中配置>0.1%,last4version,notdead.browserslistrc文件配置表示浏览器使用率大于0.1%,每个浏览器最后四个版本，没有“死”的浏览器，扩大了兼容所需的浏览器版本。此时编译好的代码会帮我们添加浏览器前缀。webpack处理样式资源，通过css-loader和style-loader解析css语法browsersList和postcss，处理兼容性问题。以上是样式资源相关的编译配置。更多关于webpack的内容可以参考我的其他博文，正在更新中~
