webpack

webpack简介

    webpack是一个前端打包工具
    用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源
    Vue 前期脚手架就是用webpack制作
（Vue 开始推荐vite构建工具（更快））
react脚手架
angular等现代框架脚手架都是依赖webpack

核心感念

入口entry
     项目运行的起点  告诉webpack从哪开始打包

entry:'./src/index.js', //入口

出口output
    打包好放入哪 filename 文件名 path 路径

output:{ //出口
		filename:"main-[hash].js",//文件名
		// path:path.resolve(__dirname,'/dist') 
		path:__dirname+'/dist' //文件夹  __dirname 当前目录
	},

模式 mode
    产品模式production
    开发模式development

mode:"production",//模式：开发模式 production产品模式

loader 加载器  需要提前安装 url-loader file-loader
    webpack默认只能加载处理js文件
loader让webpack拥有处理其他文件的能力

{test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
			 use:[{
				 loader:"url-loader",  //使用url加载器
				 options:{limit:5000,name:'images/[hash].[ext]'},
				 // 选项,当图片小于5000字节时候，转换base64（小图片减少一次http请求）
				 // 文件命名 images文件夹，hash值（计算出图片的名称） ext 后缀名
			 }]
			},

插件 plugin
    webpack运行生命周期过程中做一些其他任务（压缩，清理）

plugins:[
		// 实例化插件，指定template模板的位置
		new HtmlWebpackPlugin({
			template:'./public/index.html'
		}),
		// 实例化好清理
		new CleanWebpackPlugin()
	],

 webpack配置
    默认webpack.config.js 配置文件中