上次回顾：从0开始搭建自己的webpack开发环境（一）加载器主要用于将模块原有内容按需求转换成新内容，从而加载非JS模块！通过使用不同的加载器，Webpack可以将不同的文件转换为JS文件，如CSS、ES6/7、JSX等。一起来看看这些必须掌握的loader吧！1.Loader编写1.1Loader使用测试：匹配文件扩展名的正则表达式use:loadername，即你要使用的模块名include/exclude:manual指定必须处理的文件夹或屏蔽不处理的文件夹不需要处理。选项：为加载程序提供额外的设置选项。默认加载程序执行顺序是从下到上，*从右到左。当然，也可以手动定义执行顺序。接下来就让我们一一介绍常见的loader，感受loader的魅力吧！我们基于这个基本配置继续写：constpath=require("path");constdev=require("./webpack.dev");constprod=require("./webpack.prod");constmerge=require("webpack-merge");constHtmlWebpackPlugin=require("html-webpack-plugin");const{CleanWebpackPlugin}=require('clean-webpack-plugin');constbase={entry:'./src/index.js',output:{文件名:"[name].js",path:path.resolve(__dirname,"../dist")},插件:[newHtmlWebpackPlugin({filename:'index.html',template:path.resolve(__dirname,"../public/template.html"),hash:true,minify:{removeAttributeQuotes:true}}),newCleanWebpackPlugin({cleanOnceBeforeBuildPatterns:[path.resolve('xxxx/*'),'**/*'],}),]};module.exports=env=>{if(env.development){returnmerge(base,dev);}else{returnmerge(base,prod);}};2.处理CSS文件2.1解析css样式我们在js文件中引入css样式！导入“./index.css”；再次执行打包时会提示无法解析cssERRORin./src/index.css1:4Moduleparsefailed:Unexpectedtoken(1:4)你可能需要合适的loader来处理这种文件类型，目前没有loader被配置为处理这个文件。参见https://webpack.js.org/concepts#loaders你需要安装loadernpminstallstyle-loadercss-loader--save-devmodule:{rules:[{test:/\.css$/,use:["style-loader","css-loader"]}]}2.2提取样式文件默认情况下，只在打包时提取样式module.exports=env=>{letisDev=env.development;constbase={/*source...*/}if(isDev){returnmerge(base,dev);}else{returnmerge(base,prod);}};安装提取插件npminstallmini-css-extract-plugin--save-dev配置提取插件{test:/\.css$/,use:[!isDev&&MiniCssExtractPlugin.loader,isDev&&am;'style-loader',"css-loader"].filter(Boolean)}!isDev&&newMiniCssExtractPlugin({filename:"css/[name].css"})最终文件配置贴一下:constpath=require("路径");constdev=require("./webpack.dev");constprod=require("./webpack.prod");constmerge=require("webpack-merge");constMiniCssExtractPlugin=require("mini-css-extract-plugin");constHtmlWebpackPlugin=require("html-webpack-plugin");module.exports=env=>{letisDev=env.development;constbase={entry:"./src/index.js",output:{filename:"[name].js",path:path.resolve(__dirname,"../dist")},module:{规则:[{测试:/\.css$/,使用:[!isDev&&MiniCssExtractPlugin.loader,isDev&&'style-loader',"css-loader"].filter(Boolean)}]},plugins:[!isDev&&newMiniCssExtractPlugin({文件名:"css/[name].css"}),newHtmlWebpackPlugin({filename:"index.html",template:path.resolve(__dirname,"../public/template.html"),hash:true,minify:{removeAttributeQuotes:true}}),].filter(布尔)};如果（isDev）{返回合并（基础，开发）；}else{returnmerge(base,prod);}};2.3css预处理器不同的css预处理器需要安装不同的loader解析sass:sass-loadernode-sassless:less-loaderlessstylus:stylus-loaderstylususesass{test:/\.scss$/,use:[!isDev&&MiniCssExtractPlugin.loader,isDev&&'style-loader',"css-loader","sass-loader"].filter(Boolean)}可以在css文件中使用@import语法引用css文件，并且引用的css文件也可以导入scss{test:/\.css$/,use:[!isDev&&MiniCssExtractPlugin.loader,isDev&&'style-loader',{loader:"css-loader",options:{importLoaders:1//导入的文件需要调用sass-loader处理}},"SASs-loader"].filter(Boolean)},2.4处理样式前缀使用postcss-loader添加样式前缀npminstallpostcss-loaderautoprefixer处理css前添加前缀{test:/\.css$/,use:[!isDev&&MiniCssExtractPlugin.loader,isDev&&'style-loader',{loader:"css-loader",options:{importLoaders:2//导入的文件需要调用sass-loader处理}},{loader:"postcss-loader",options:{plugins:[require('autoprefixer')]}},"sass-loader"].filter(Boolean)},或者你也可以创建一个postcss配置文件postcss.config.jsmodule.exports={plugins:[require('autoprefixer')]}可以配置浏览器的兼容范围browserslistrccover99.5%2.5csscompression生产环境需要压缩css文件，配置minimizer选项，安装压缩插件npmioptimize-css-assets-webpack-pluginterser-webpack-plugin--save-dev在webpack.prod.js文件中配置压缩constOptimizeCSSAssetsPlugin=require('optimize-css-assets-webpack-plugin');constTerserJSPlugin=require('terser-webpack-plugin');优化:{最小化:[新TerserJSPlugin({}),newOptimizeCSSAssetsPlugin({})]}2.6文件指纹Hash：整个项目的哈希值chunkhash：根据入口生成的哈希值contentHash：根据每个文件的内容生成的哈希值，我们可以合理使用哈希戳，来缓存文件！isDev&&newMiniCssExtractPlugin({filename:"css/[name].[contentHash].css"})3.处理文件类型3.1处理引用图片importlogofrom'./webpack.png';让img=document.createElement('img');img.src=logo;document.body.appendChild(img);使用file-loader，会对图片进行打包，返回打包后的路径{test:/\.jpe?g|png|gif/,use:{loader:'file-loader',options:{name:`img/[name].[ext]`}}}3.2file-loader也用于处理icon二进制文件要打包{test:/woff|ttf|eot|svg|otf/，使用：{loader:'file-loader'}}3.3转base64使用url-loader将满足条件的图片转成base64，不满足条件的url-loader会自动调用file-loader进行处理{test:/\.jpe?g|png|gif/,use:{loader:'url-loader',options:{limit:100*1024,name:`img/[name].[ext]`}}}4.总结通过使用loader，我们了解到loader可以将其他类型的模块处理成JS模块进行加载使用这实际上是webpack中非常重要的混淆依赖的一部分。在下一篇文章中，我们将讨论如何一起解析和处理JS模块。希望大家继续关注和支持！
