一、webpack基础配置有哪些?
作用:是一个静态资源构建工具,主要用于打包,可以将前端的一些资源,比如css、js、图片、音频打包成一个配置项对应的一个静态模块。
"webpack": "^4.28.4",
1.mode:模式(运行环境模式),一般定义一个名字,用于区分当前配置文件作用于开发环境还是预发or生产
2.entry:入口,表示webpack从那个文件当作入口起点开始进行打包
3.output:将前端资源打包到哪
4.loader:主要处理非javascript的一些东西,比如css-loader、style-loader、url-loader、file-loader、less-loader
5.plugin:用来执行打包期间的优化和压缩
二、webpack性能优化有哪些?
1.项目建立文件层级不能太深,尽量模块化构建
2.将静态的一些资源依赖提出放在CDN上,如(协议文件,模版文件等)
3.分包处理,减小包体积(代码分离),使用Entry Dependencies或者SplitChunksPlugin去重和分离代码
4.配置打包文件名:filename:contenthash