Webpack基础应用篇8管理资源

　　在上一章，我们讲解了四种资源模块引入外部资源。除了资源模块，我们还可以通过loader引入其他类型的文件。1。6。1什么是loader
　　webpack只能理解JavaScript和JSON文件，这是webpack开箱可用的自带能力。loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
　　在webpack的配置中，loader有两个属性：test属性，识别出哪些文件会被转换。use属性，定义出在进行转换时，应该使用哪个loader。constpathrequire（path）；module。exports｛output：｛filename：myfirstwebpack。bundle。js，｝，module：｛rules：〔｛test：。txt，use：rawloader｝〕，｝，｝；
　　以上配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。这告诉webpack编译器（compiler）如下信息：
　　嘿，webpack编译器，当你碰到在require（）import语句中被解析为。txt的路径时，在你对它打包之前，先use（使用）rawloader转换一下。1。6。2加载CSS
　　为了在JavaScript模块中import一个CSS文件，你需要安装styleloader和cssloader，并在fhttps：webpack。docschina。orgconfigurationmodulemodule配置中添加这些loader：〔felix〕webpack5npminstallsavedevstyleloadercssloader
　　修改配置文件：module：｛rules：〔｛test：。cssi，use：〔styleloader，cssloader〕，｝，〕，｝，
　　07manageassetswebpack。config。js。。。module。exports｛。。。配置资源文件module：｛rules：〔。。。｛test：。cssi，use：〔styleloader，cssloader〕，｝，〕，｝，。。。｝
　　模块loader可以链式调用。链中的每个loader都将对资源进行转换。链会逆序执行。第一个loader将其结果（被转换后的资源）传递给下一个loader，依此类推。最后，webpack期望链中的最后的loader返回JavaScript。
　　应保证loader的先后顺序：styleloader在前，而cssloader在后。如果不遵守此约定，webpack可能会抛出错误。webpack根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的loader。在这个示例中，所有以。css结尾的文件，都将被提供给styleloader和cssloader。
　　这使你可以在依赖于此样式的js文件中import。style。css。现在，在此模块执行过程中，含有CSS字符串的标签，将被插入到html文件的中。
　　我们尝试一下，通过在项目中添加一个新的style。css文件，并将其import到我们的index。js中：
　　07manageassetssrcstyle。css。hello｛color：f9efd4；｝
　　在入口文件里导入。css文件：import。style。cssdocument。body。classList。add（hello）
　　07manageassetssrcindex。js导入函数模块。。。import。style。css。。。document。body。classList。add（hello）
　　启动服务，打开浏览器：〔felix〕07manageassetsnpxwebpackserveopen
　　你应该看到页面背景颜色是浅黄色。要查看webpack做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为标签是由JavaScript动态创建的），并查看页面的head标签，包含style块元素，也就是我们在index。js中import的css文件中的样式。
　　现有的loader可以支持任何你可以想到的CSS风格sass和less等。安装lessloader：〔felix〕webpack5npminstalllesslessloadersavedev
　　修改配置文件：module：｛rules：〔｛test：。lessi，use：〔styleloader，cssloader，lessloader〕，｝〕，｝，
　　07manageassetswebpack。config。js。。。module。exports｛。。。配置资源文件module：｛rules：〔。。。｛test：。lessi，use：〔styleloader，cssloader，lessloader〕，｝，。。。〕，｝，。。。｝
　　在项目src目录下创建style。less文件：color：。world｛color：｝
　　在入口文件中引入。less文件：import。style。lessdocument。body。classList。add（world）
　　07manageassetssrcindex。js导入模块。。。import。style。less。。。document。body。classList。add（world）