webpack5学习webpack.config.js配置入口入口文件配置，webpack根据配置文件module.exports={...//入口文件，从哪个文件开始打包入口："./src/index.js",...}output打包输出位置const{resolve}=require("path")module.exports={output:{//打包文件名filename:"build.js",//绝对pathofpackagingpath:resolve(__dirname,"build"),},}loader将浏览器不能识别的文件翻译成浏览器可以识别的文件，比如将less文件翻译成css文件等npmicss-loaderstyle-loadermodule.exports={...//安装css-loaderstyle-loadermodule:{rules:[{//匹配哪些文件，通常用正则表达式test:/\.css$/,//执行使用顺序是从右到左，从下到上use:[//创建一个style标签，将js中的style插入到style中，再将style中的style插入到head标签中"style-loader",//将css处理成commonjs模块，里面的内容是样式字符串。"css-loader",],},],},...}2。Processlessloadernpmilessless-loadermodule.exports={...//loaders配置模块：{rules:[//processLessfiles，不同的文件需要不同的loader{test:/\.less$/,use:["style-loader","css-loader",//将less文件翻译成css文件"less-loader",],},],},...}3.处理图片资源安装file-loaderurl-loadernpmifile-loaderurl-loadermodule.exports={...{test:/\.(png|jpg|gif)$/,//需要下载url-loader和file-loaderloader:"url-loader",options:{//图片小于10kb，会进行base64处理//优点：减少请求次数（减轻服务器压力）//缺点：图片尺寸会更大（文件请求速度会beslower)limit:3*1024,//问题：url-loader默认使用es6模块化解析，而html-loader使用commonjs导入图片，解析时会出现问题：[objectModule]//解决方法：关闭url-loader的es6模块化，使用commonjs解析esModule:false,//重命名图像//[hash:6]获取图像哈希的前6位数字//[ext]获取文件的原始扩展名//name:"[name].[hash:6][ext]",},type:"javascript/auto",//使用旧版本},...}4.处理html文件导入图片问题安装html-loadernpmihtml-loadermodule.exports={...//在html中处理img图片引入问题{test:/\.html$/,loader:"html-loader",},...}5.处理其他资源（iconfont图标）module.exports={...//处理其他资源（js、html、css除外）{exclude:/\.(css|js|html)$/,loader:"file-loader",options:{//解决方法：关闭url的es6模块化-loader，使用commonjs解析esModule:false,outputPath:"icon/",},type:"javascript/auto",},...}6.处理css样式前缀npmipostcss-loaderpostcss-preset-env//process.env.NODE_ENV="development"//设置运行环境module.exports={...module:{rules:[{test:/\.css$/,use:[//"style-loader",MiniCssWxtractPlugin.loader,"css-loader",{loader:'postcss-loader',//options:{//ident:'postcss',//plugins:()=>[//require('postcss-preset-env')()//]//}}],},{test:/\.less$/,use:[//"style-loader",MiniCssWxtractPlugin.loader,"css-loader","postcss-loader","less-loader",],},],},...};package.json加入以下配置"browserslist":{"development":["last1chromeversion","last1firefoxversion","last1safariversion"],"production":[">0.2%","notdead","notop_miniall"]}在webpack.config.js同级新建postcss.config.js配置下面的module.exports={plugins:[[//postcss-preset-env插件读取package.json文件中的browserslist配置require("postcss-preset-env")(),],],};7.处理js兼容性问题module.exports={module:{rules:[//JS兼容性处理//需要下载babel-loader@babel/preset-env@babel/core@babel/polyfill{test:/\.js$/，排除：/node_modules/，加载器：“babel-loader”，选项：{预设：[[“@babel/preset-env”，{useBuiltIns：“entry”，corejs：{版本：3，}，//目标：{//}},],],},},],},};plugins使用插件来处理更复杂的逻辑，比如压缩文件等。1.处理html模板安装html-webpack-pluginnpmihtml-webpack-pluginconstHtmlWebpackPlugin=require("html-webpack-plugin");module.exports={....//插件配置plugins:[newHtmlWebpackPlugin({template:'./index.html',//压缩html代码minify:{collapseWhitespace:true,removeComments:true}})],....}2.将css文件解压到一个单独的文件中并安装npmimini-css-extract-pluginpluginconstMiniCssWxtractPlugin=require('mini-css-extract-plugin')module.exports={...模块：{规则：[{测试：/\.css$/，使用:[//"style-loader",MiniCssWxtractPlugin.loader,"css-loader",],},{test:/\.less$/,使用:[//"style-loader",MiniCssWxtractPlugin.loader,"css-loader","less-loader",],},],},插件:[newMiniCssWxtractPlugin({filename:"css/index.css",}),],...};3.压缩css插件安装css-minimizer-webpack-pluginnpmicss-minimizer-webpack-pluginconstCssMinimizerWebpackPlugin=require("css-minimizer-webpack-plugin");module.exports={plugins:[newCssMinimizerWebpackPlugin({test:/\.css$/g,}),],};模式项目的环境模式分为开发模式和生产模式模块.expots={...//modemode:"development",//分为开发模式和生产模式，生产模式会进行代码压缩...}webpack打包命令webpack入口文件-o输入文件地址--mode=production/development1.webpack可以处理js和json文件，不能处理css和image文件（需要安装loader或插件）2.生产环境打包生成的文件会被压缩，但是开发环境会3.可以处理es6modulardevServer安装webpack-dev-servernpmiwebpack-dev-servermodule.exports={...devServer:{//打包地址static:resolve(__dirname,"build"),//portnumberport:3000,//开启热更新hot:true,//开启gzip压缩compress:true,//监控模板，used自动更新浏览器watchFiles:["./index.html"],},...}启动命令webpackserve或npxwebpack-dev-server
