前面写的，我们知道webpack不仅是一个javascript模块打包工具，还是整个前端项目，也就是前端项目的模块打包工具。webpack可以用来管理前端项目中的任何类型的资源文件。如何加载资源模块首先，我们在项目的src目录下添加一个样式文件main.css。目录结构如下：|--03-loader|--src|--main.css|--package.json|--webpack.config.js/*main.css*/body{margin:0auto;padding:020px;max-width:800px;background:yellow;}接下来将webpack.config.js配置中的入口文件路径修改为main.css文件路径，执行webpack直接打包css资源文件。constpath=require("path")module.exports={//样式文件路径entry:"src/main.css",output:{filename:"bundle.js",path:path.join(__dirname,"output")},mode:"none"}如果此时我们不做任何其他配置，直接执行打包命令，会报错提示我们报错，因为js文件只能作为包装入口。这样做的原因是webpack默认解析js语法，对于非js语法，需要先loader，然后在配置文件中配置loader。css文件经过css-loader处理，然后提交给webpack打包生成js文件。$npmicss-loader-D但是，此时你执行打包命令的时候，尝试在你的页面中使用生成的bundle.js文件，你会发现刚才的main.css模块不起作用，这时我们需要添加一个额外的style-lodaer加载器，这样它就可以正常工作。样式不生效的原因是：css-loader只会把css模块加载到js代码中，不会直接使用这个模块。然后，在你安装style-lodaer之后，将配置文件中的use属性改为一个数组，将style-lodaer配置进去。因为loader数组的加载顺序是自下而上的，所以style-lodaer应该配置在css-loader之上。//main.jsimport"./style.css"console.log("helloyichuan");/*style.css*/body{margin:0auto;padding:020px;max-width:800px;background:yellow;}loaderloader是整个webpack打包配置的核心，因为它需要用来打包任意类型的文件，从而最终打包生成js文件。那么，为什么webpack在js中加载css文件而不是分离样式文件和行为呢？这是因为真正需要其他资源的并不是整个项目，而是需要使用的一个模块。假设你在页面上开发某个功能时，需要用到样式模块和图片文件。如果还是将这些资源单独导入到html文件中，然后在js中添加相应的逻辑代码，想象一下如果不需要这部分功能的话，需要把JS中的代码和资源文件引入删掉同时在HTML中，也就是说，你需要同时维护多行。不过这个时候，你按照webapck的import设计，所有的资源加载都是由js代码来控制的，后面只需要维护js代码即可。为什么要建立这种引入其他资源的JS文件的依赖关系呢？这是因为：从逻辑上讲，更合理：因为JS确实需要这些资源文件的配合才能实现整体的功能。配合webapck等工具的打包：可以保证资源不缺，缺一不可。接下来我们开发一个简单的loader，目标是实现md文件的打包。//index.jsimportmrakdownfrom"hello.md"##Hello//md-loader.jsconstmd=require("./hello.md")module.exports=source=>{//loadedmodulecontentconsole.log("loadedmodulecontent==>",source);//返回值为最终打包结果return"Hello"}//webpack.config.jsconstpath=require("path")module.exports={//style文件路径entry:"./src/index.js",output:{filename:"bundle.js"},mode:"none",module:{rules:[{test:/\.md$/,//根据打包过程中遇到的文件路径，记得匹配是否使用这个loaderuse:"./md-loader"//指定具体使用的loader}]}}这个时候执行一个打包命令后报错，提示我们加载对应的loader。这是因为每个打包好的loader形成一个链，每个loader都依赖于另一个loader的引入，最终打包的包一定是js文件。对此，我们有一个解决方案：将我们自定义的md-laoderloader的输出设置为js语法来安装对应的loader加载器module.exports=source=>{//loadedmodulecontentconsole.log("加载的模块内容==>",source);//返回值就是最终的打包结果return"console.log('Hello')";}那么当我们使用合适的Loader解析md文件时就是一个html模块，你需要先安装marked，安装完成后，导入md-loader.js中的模块，然后解析。$npmimarked//./md-loader.jsconstmarked=require("marked")module.exports=source=>{//1。将md文件转换为html字符串consthtml=marked(source);return`exportdefault${JSON.stringify(html)}`}参考文章《webpack原理与实践》《webpack中文文档》写在最后。loader机制是webpack的核心内容。因为有了loader机制，webpack可以支持整个前端项目的模块化，通过webpack实现任何需要的资源的加载。
