loader的作用在前面的案例中，主要是利用webpack对写好的JS代码进行处理，通过webpack自动处理它们之间的依赖关系。但是在实际开发中，不仅要处理JS文件，还要加载CSS文件、图片等。对于webpack本身，不支持这些转换。所以需要为webpack扩展相应的loader。loader的使用通过npm安装需要的loader。（webpack中文官网）在webpack.config.js中modules属性下配置。loadercss-loader和style-loader不用css-loader时，直接引用main.js文件中的依赖，然后打包：//normal.cssbody{background-color:pink;}//main.jsconst{name,age,say,run}=require('./js/info.js');console.log(name);console.log(age);console.log(say);run();//依赖在CSS文件上，使得webpack打包时，会处理normal.css文件require('./css/normal.css');控制台会输出如下错误：soyouneedtoinstallcss-loadertoprocessthecssfile.使用npminstall--save-devcss-loader。?--save-dev是开发时的依赖模块，即仅用于开发，不依赖实际项目运行时。rules:[{test:/\.css$/,use:['style-loader','css-loader']}]注意：如果只是安装css-loader并打包，则不会在DOM中将显示css文件定义的效果。因为css-loader只加载css文件，如果要将加载的css文件渲染成DOM，还需要安装style-loader（npminstallstyle-loader--save-dev）；useuse:['style-loader','css-loader']语句，需要注意的是，当使用多个loader时，loader的执行顺序是从右到左，所以style-loader应该放在左边，应该先执行css-loader加载css文件，之后再由style-loader渲染到DOM中。less-loaderLess是一种CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易于维护和扩展。less-loader用于处理JS文件中对less文件的依赖。安装less-loader：使用命令npminstall--save-devless-loaderless。??注意：如果需要安装特定版本，需要在loader后面加上@+版本号。以下同理。在webpack.config.js文件中配置（执行顺序为自下而上）。{test:/\.less$/,use:[{loader:"style-loader"},{loader:"css-loader"},{loader:"less-loader",options:{strictMath:true,noIeCompat:true}}]}url-loader函数使用url-loader加载一些css样式的图片和其他文件。安装说明：npminstall--save-devurl-loader。使用webpack.config.js中的配置：{test:/\.(png|jpg|gif)$/,use:[{loader:'url-loader',options:{//当文件小于limitdefined当指定一个值时，图像将被编译成base64字符串。//当图片大于limit定义的值时，打包时会报错，需要使用file-loader模块加载。限制：13000}}]}?如果插入的图片太大，需要使用file-loader模块加载。file-loader用于处理大文件的加载。安装说明：npminstall--save-devfile-loader。然后再次运行pack命令。运行index.html，控制台会提示找不到文件。这是因为在使用webpack打包的时候，webpack会把图片文件放到打包文件的同一个路径下，直接引用，但是是直接引用，没有指定前置路径。相同路径无前置路径调试时，url将路径改为url(dist/8e08b79ef4c5e855db743e16c3b5f2a1.png），页面将正常呈现。如果要解决这个问题，需要把后台后面的url引用路径改成dist/xxx.jpg。添加publicPath:'dist/'到webpack.config.js文件。意思是只要涉及到url，就会自动在文件前面加上==dist/==。问题解决了？当index.html文件也在dist文件夹下时，就不需要使用publicPath:'dist/'命令###关于生成的文件名*webpack时会把文件放到打包文件的同级目录下打包，并会生成一个32位的哈希值，防止文件重复命名。*但在实际开发中，我们可能会对包的名称有一定的要求——比如将所有的图片放在一个文件夹中，但需要跟原来的名称保持一致，同时防止重复。*此时我们需要在options中添加一个name属性：*img：要打包文件的文件夹；*name：获取图片原来的名字，放在这个位置；*hash:8：为了防止镜像名称重复，仍然使用hash，但只保留8位；*ext:原始图像扩展。`javascript//Using[name]是使用图片原来的名字，而使用.就是连接namesname:'img/[name].[hash:8].[ext]'`*把原来打包的文件删除，然后重新打包npmrunbuild.完成img目录下打包的自定义图片名称##babel-loader?我们上面打包好的文件中会有ES6语法。当浏览器不支持ES6时，将无法正常渲染，所以我们需要使用babel-loader模块来完成转换。*Installation:`javascriptnpminstallbabel-loaderbabel-corebabel-preset-envwebpack`*Configuration:`JavaScript{test:/.js$/,//因为最终打包完成并运行node依赖files和Donotparticipate，所以使用exclude来排除文件//为什么使用2015版本未知预设：['es2015']}}}`*再次运行npmrunbuild。打包完成后进入打包文件bundle.js搜索ES6语法（如let,const）。如果没有找到，说明你已经成功将ES6语法转换为ES5。#本章结束
